CSS在同一行上添加两个块

fharum 发布于 2019-10-09 css 最后更新 2019-10-09 22:59 10 浏览

我想创建这样的盒子: enter image description here 但用我目前的代码,我得到了这样的东西: enter image description here 这是我目前的代码

<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>
已邀请:

jdolor

赞同来自:

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

ererum

赞同来自:

<!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,它们的高度相同,但内部的边距向左移动,文本也缩进,左边只有边框,外边框有边框。你可以改变颜色以适合你。

gquia

赞同来自:

<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>
this code is display like this
enter image description here

nfugit

赞同来自:

你应该使用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>

enemo

赞同来自:

最简单的解决方案是使用伪元素,它将为您提供非常干净的标记。 有了这个,您可以使用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>