在HTML / CSS

Question

我是HTML / CSS的新手。我在设计网站时遇到问题。

看看：

我有两个街区，我想在每个街区写一些不同的东西。如何删除上面图片中标记的空白区域。

这是我的代码：

CSS
.blocks{
  display: inline-block;
  margin: 15px 0 0;
  border: none;
  color: black;
  background: #ff6f29;
  width: 30%;
}
.wrap{
    width: 100%;
}

HTML

<div class= 'wrap'>
<div class= 'blocks'>
Some code
</div>
<div class= 'blocks'>
<p>text text text text</p>
<p>text text text text</p>
<p>text text text text</p>
</div>
</div>

谢谢！

Answer 1

嗨现在定义你的class .blocks vertical-align:top;就像这样

.blocks{vertical-align:top;}

<强> what is vertical-align

Answer 2

只需使用浮动：

.blocks{
  margin: 15px 0 0;
  border: none;
  color: black;
  background: #ff6f29;
  width: 30%;
    float:left;
    margin:5px;
    padding:5px;
}
.wrap{
    width: 100%;
    float:left;
}

她的小提琴：https://jsfiddle.net/g5LgyLjg/

Answer 3

您需要将float: left;添加到.blocks css。

Here is a working example