代码之家 › 专栏 › 技术社区 › Damn Vegetables

css:每行一个div,在div中水平堆叠图像和文本,并应用边距

css

Damn Vegetables · 技术社区 · 5 年前

我写了下面的代码,除了页边空白不起作用外,它还起作用。见下图。我想要介于 item 在图像和文本之间。我怎样才能得到我想要的布局?我不用用 float=left 如果有更好的方法。

.item {
  clear: both;
  margin-bottom: 1em;
  display: block;
}

.leftImage {
  float: left;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

3 回复 | 直到 5 年前

disinfor 5 年前

下面是保持浮动的答案,使用伪元素清除中的浮动元素 item .

.item {
  clear: both;
  margin-bottom: 1em;
  display: block;
}

.item::after {
  content: '';
  display: block;
  clear: both;
}

.leftImage {
  float: left;
}

.rightText {
  margin-left: 1em;
  float: left;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

这是相同的布局,删除浮动,使用 display: flex 关于你的 项目 .

.item {
  display: flex;
  margin-bottom: 1em;
}

.rightText {
  margin-left: 1em;
}

<div class=“item”>
<img class=“leftimage”src=“http://via.placeholder.com/640x360”/>
<p class=“righttext”>您好<br/>世界。<p>
</分区>

<div class=“item”>
<img class=“leftimage”src=“http://via.placeholder.com/640x360”/>
<p class=“righttext”>您好<br/>世界。<p>
</分区>

关于 .rightText ,浏览器正在添加。你可以用 margin-top: 0 .

ManUtopiK 5 年前

最简单的方法是 display:flex; 相反:

.item {
  margin-bottom: 1em;
  display: flex;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/320x180" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/320x180" />
  <p class="rightText">Hello <br/> world.</p>
</div>

DanieleAlessandra 5 年前

对浮动元素容器最快的修复方法是溢出:隐藏:

.item {
  clear: both;
  margin-bottom: 1em;
  display: block;
  overflow: hidden;
  
}

.leftImage {
  float: left;
}

.rightText {
  margin-left: 1em;
}

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

rezan21 5 年前

一个简单的方法是使用css网格。将两个项类包装在div中,并使此div显示为网格。每个“item”类将是另一个水平分隔的网格。

<div class="container">
<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

<div class="item">
  <img class="leftImage" src="http://via.placeholder.com/640x360" />
  <p class="rightText">Hello <br/> world.</p>
</div>

</div>

.container{
display:grid;
grid-template-rows: 1fr 1fr;
grid-gap:10px
}
}

.item{
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:10px
}