CSS如何让两个块在同一行显示？

Question

CSS如何让两个块在同一行显示？

htmlcss

3

我想创建像这样的框框：

但是我的当前代码得到的结果是这样的：

以下是我当前的代码：

<Note_firstpart style="display: inline;background:#31B458; background: -moz-linear-gradient(#31B458 , #1BC14D); background: -o-linear-gradient(#31B458 , #1BC14D); background: -webkit-linear-gradient(#31B458 , #1BC14D); background: linear-gradient(#31B458 , #1BC14D); border: 1px solid #05500b; padding: 9px;">
</Note_firstpart>
<Note_body style="display:inline-block; background:#DDFFED; background: -moz-linear-gradient(#DDFFED , #BBFEDA); background: -o-linear-gradient(#DDFFED , #BBFEDA); background: -webkit-linear-gradient(#DDFFED , #BBFEDA); background: linear-gradient(#DDFFED , #BBFEDA); border: 1px solid #05500b; padding: 11px;">
Long Text</Note_body>

- mimi

我想在博客上使用这个。我希望创建 .note 类型，然后将在需要时访问或调用它。 - mimi

5个回答

2

最简单的解决方案，将给您一个真正干净的标记，是使用伪元素。

使用伪元素，您可以使用Flexbox或任何其他方法来调整大小和颜色，这里使用绝对定位和填充进行操作。

/* Note Box
-----------------------------------------*/

    .note_text {
      position: relative;
      border: 1px solid black;
      margin-left: 10px;
      background: #FFFFFF;
      padding: 3px 3px 3px 25px;
    }
    
    .note_text::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      bottom: 0; width: 20px;
      border-right: 1px solid black;
      background: #23E67E; 
    }

<body>
    <div class="note_text">
      Test seeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
      NEW LINE TESTING TESTING
    </div>
</body>

- Asons

2

<!DOCTYPE html>
<html>

<head>
  <style>
    .outer {
      border: 1px solid black;
      height: auto;
      width: 100px;
      background-color: green;
    }
    
    .inner {
      border-left: 1px solid black;
      height: auto;
      margin-left: 25px;
      background-color: white;
      text-indent: 10px;
    }
  </style>
</head>

<body>
  <div class="outer">
    <div class="inner">
      Tesxt
    </div>
  </div>
</body>

</html>

我刚刚使用了两个div，其中它们的高度相同，但内部的边距向左移动，并且文本也在左侧缩进并带有仅在左侧的边框，而外部具有边框。您可以根据需要更改颜色。

- Josh

在 .inner 部分添加宽度起作用了。我将所有的宽度和高度都设置为自动。 - mimi

太棒了！很高兴我能帮到你。 - Josh

2

<Note_body style="display:inline-block; background:#DDFFED; background: -moz-linear-gradient(#DDFFED , #BBFEDA); background: -o-linear-gradient(#DDFFED , #BBFEDA); background: -webkit-linear-gradient(#DDFFED , #BBFEDA); background: linear-gradient(#DDFFED , #BBFEDA); border: 1px solid #05500b;height:40px;width:150px;line-height:40px;">
    <Note_firstpart style="display: inline;background:#31B458; background: -moz-linear-gradient(#31B458 , #1BC14D); background: -o-linear-gradient(#31B458 , #1BC14D); background: -webkit-linear-gradient(#31B458 , #1BC14D); background: linear-gradient(#31B458 , #1BC14D); border: 1px solid #05500b;padding:11px;margin-right:10px;">
    </Note_firstpart>
        Long Text
</Note_body>

这段代码显示如下

- Minhaj Patel

它不起作用，只有整个句子的前两个单词显示在块内，而整个文本则显示在外面。 - mimi

如果您想在_Node_body_中添加更多文本，请将Note_body的width属性增加到350px或600px。 - Minhaj Patel

0

你应该使用CSS Flexbox

希望这足够了

  .parent {
    width: 500px;
    margin: auto;
    display: flex;
  }
  div:not(.parent) {
    padding: 10px;
    border: 1px solid #0E0E0E;
  }
  .color {
    background: linear-gradient(#31B458, #1BC14D);
    flex: 0 20%;
  }
  .text {
    flex: 1;
  }

<div class="parent">
  <div class="color">

  </div>
  <div class="text">
    Text
  </div>
</div>

- Wael Assaf

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dippas · Accepted Answer

使用flexbox可以实现这一点。

注意，我将您的<note标签更改为div

section {
  display: flex
}

div {
  border: 1px solid #05500b;
  padding: 11px;
}

div:first-of-type {
  background: linear-gradient(#31B458, #1BC14D);
  flex: 0 100px;
}

div:last-of-type {
  flex: 1
}

<section>
  <div> </div>
  <div> Long Text</div>
</section>