Question

对于一个Web开发项目，我正在尝试使用html / css以一种特殊的方式来格式化一些图像和文本，我已经可以使用bootstrap来做到这一点，但是我想不使用bootstrap来做到这一点。我想将此代码用作多个页面的模板，尽管引导解决方案可以完成我想做的事情，但它仅在一个特定实例中有效，而在其他实例中效果不佳。
不使用引导程序的情况下，它的外观如下：
--------------heading-------------- -----image----- -----text 1----- -----text 2-----
诀窍在于，文本1有时可能足够长，可以包裹在图像底部，而我不希望这种情况发生。如果文本1足够长，以至于它比图像的底部下降得更多，我希望它的功能就像在其自己的列中一样。我也希望文字2位于图片下方，并一直向左对齐。
非常感谢您的帮助，谢谢

Answer 1

所有您需要做的就是利用行/列布局，其中标题占据单个行。然后，第二行将分为两列-左和右。最左边的列将包含图像和text 2，而最右边的列将包含text 1。您需要在两列中设置width中的50%，然后将float设置为left。

这可以在下面看到，我在其中添加了占位符文本和背景以帮助说明这一点。

.left,
.right {
  width: 50%;
  float: left;
}

.heading {
  background: lightsalmon;
  text-align: center;
  padding: 10px;
}

img {
  display: block;
  margin: 10px auto;
}

p {
  margin: 10px;
}

.left {
  background: yellow;
}

.right {
  background: cyan;
}

<div class="row heading">Heading</div>
<div class="row">
  <div class="left">
    <img src="http://placehold.it/100">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Dictumst vestibulum rhoncus est pellentesque elit.
      Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Vitae tortor condimentum lacinia quis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus
      dolor.
    </p>
  </div>
  <div class="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Dictumst vestibulum rhoncus est pellentesque elit.
      Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. Sapien pellentesque habitant morbi tristique senectus et netus et malesuada. Vitae tortor condimentum lacinia quis. Luctus venenatis lectus magna fringilla urna porttitor rhoncus
      dolor. Mauris vitae ultricies leo integer malesuada. Sed arcu non odio euismod. Id nibh tortor id aliquet lectus proin nibh. Tortor at risus viverra adipiscing. Platea dictumst quisque sagittis purus sit amet volutpat consequat mauris. In ornare
      quam viverra orci sagittis eu volutpat odio facilisis. Vel orci porta non pulvinar. Interdum velit euismod in pellentesque massa placerat. Euismod in pellentesque massa placerat duis ultricies lacus sed.</p>
  </div>
</div>

没有引导程序就无法包装的图像和文本？

1 个答案: