如何将响应式文本 div 放在另一个响应式 div 旁边

Question

我有一个包含图像的 div 和图像旁边的文本 div。在宽屏幕上，两者看起来都很好，但是当我开始缩小屏幕时，文本 div 低于图像 div 并留下了很多可用空间。浏览器似乎希望将文本 div 保持在 100% 并将其作为一个块移动。我需要允许 IE8+ 使用它，所以不能使用 flex 属性。有没有办法响应性地不断缩小文本 div 直到它达到最小尺寸，然后让它下降到下面，这样我们就没有这么大的开放空间了？

<div class="page-text" style="display: block;">
   <div style="display: float: left; margin-right: 25px; vertical-align: middle;">
        <img src="./images/mover.jpg" style="width: 100%; min-width: 250px">
    </div>
    <div class=box style="float: right;  vertical-align: middle;">
        <p align="center" style="font-size: 15pt; font-weight: 500;">Our Mission</p>
        <ol>
            <li style="font-size: 13pt;">To take away the burden of the downsizing process so you can focus on what matters, and<p>
            <li style="font-size: 13pt;">To maximize the equity in your home and contents back to you or your estate.
         </ol>
   </div>
</div>

Answer 1

HTML

我删除了内联样式并添加了类名：

<div class="page-text">
  <div class="page-text-image">
    <img src=" http://placehold.it/1200x650">
  </div>
  <div class="page-text-message">
    <p>Our Mission</p>
    <ol>
      <li>To take away the burden of the downsizing process so you can focus on what matters, and
      <li>To maximize the equity in your home and contents back to you or your estate.
    </ol>
  </div>
</div>

CSS

以下是基本方法：首先从小屏幕开始，然后为大屏幕添加媒体查询（您可以根据自己的规格更改该宽度）。将图像 div 向左浮动，消息 div 向右浮动，将每个容器设置为 50% 宽度。

/* mobile first */
.page-text-image img {width:100%;display:block;}

/* for large screens and up */
@media only screen and (min-width: 64.063em) {
.page-text-image {width:50%; float:left;}
.page-text-message {width:50%; float:right;}
}

IE 支持

由于 IE8 不支持媒体查询，除非我们添加备份计划，否则这些用户将看到移动版本。我们有几个选择：

1. 使用 IE 条件 cmets 为 IE 提供外部样式表（首选）
2. 在现有样式表中使用 CSS hack 来为 IE 提供支持

这些特定于 IE 的样式基本上与上面媒体查询中的样式相同。如果您需要进一步的说明，请告诉我。

Answer 2

你可以用 Bootstrap 来做，不需要媒体查询。

HTML...

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-lg-8 col-md-6 col-sm-12">
<img src=" http://i.imgur.com/gn9FIEm.jpg" width="100%">
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
    <p>Our Mission</p>
    <ol>
      <li>To take away the burden of the downsizing process so you can focus on what matters, and
      <li>To maximize the equity in your home and contents back to you or your estate.
    </ol>
</div>

它可能最适合你。