创建列表，标题和图像左对齐，文本右对齐？

Question

我想创建一个类似于图像中的布局

在HTML中创建布局的最佳和最干净的方法是什么，以及在CSS中最干净的方法？这就是我尝试过的：codepen.io/hafsadanguir/pen/bZQLdL

提前感谢您的帮助：）

Answer 1

我认为实现结果的最佳和最干净的方式就像你正在展示的那样是使用Bootstrap。以下代码用于结构，例如您将显示为我自己使用的内容。此外，通过使用Bootstrap，您将有利于多个屏幕的响应式布局

HTML：

<div class="container" id="container">
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgOne"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgTwo"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgThree"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-1">
      <div class="img" id="imgFour"></div>
    </div>
    <div class="col-sm-2">
      <h1>Lorem ipsum dolor sit amet</h1>
    </div>
    <div class="col-sm-9">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec lacus vel nunc sodales ultrices. Integer sodales lacus ac molestie fermentum. Integer ac tempor massa. </p>
    </div>
  </div>
</div>

CSS：

#container {
  background: red;
}
.img{
  height: 50px;
  background: green;
}
#container .row {
  margin-bottom: 15px;
}
#container h1 {
  margin: 0;
}
#imgOne {
    background-image: url(#your_image_path);
}
#imgTwo {
    background-image: url(#your_image_path);
}
#imgThree {
    background-image: url(#your_image_path);
}
#imgFour {
    background-image: url(#your_image_path);
}

通过使用一点点jQuery，我们可以创建一个尖锐的方形图像容器：

$('.img').height($('.img').width());

请记住在文档标记from Here中添加Bootstrap文件， 而且您需要根据您的awn偏好调整设计。

来自Here的Bootply预览。