Question

我想创建这样的框：

但是使用我当前的代码，我得到的是这样的：

这是我目前的代码

＆＃13;

<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>

＆＃13;

Answer 1

使用flexbox。

注意我已将<note代码更改为div

＆＃13;

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
}

＆＃13;

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

＆＃13;

Answer 2

＆＃13;

<!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>

＆＃13;

我刚刚使用了两个div，它们的高度相同但内部的边距向左移动，文本也缩进，左边只有边框，外边框有边框。你可以改变颜色以适合你。

Answer 3

<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>

此代码显示如下

Answer 4

最简单的解决方案是给你一个非常干净的标记，就是使用伪元素。

使用它可以使用Flexbox或任何其他方式来调整大小和颜色，这里使用绝对位置和填充。

＆＃13;

/* 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; 
    }

＆＃13;

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

＆＃13;

Answer 5

您应该使用CSS Flexbox

我希望这就足够了

＆＃13;

  .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;
  }

＆＃13;

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

＆＃13;

CSS在同一行上添加两个块

5 个答案: