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

Question

对于web开发项目，我正在尝试使用html / css以特定方式格式化一些图像和文本，我已经能够使用bootstrap，但我想在没有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>