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不支持媒体查询，除非我们添加备份计划，否则这些用户将看到移动版本。我们有几个选择：

使用IE条件注释仅为IE提供外部样式表（首选）
在现有样式表中使用CSS hacks来提供对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>

它可能最适合你。

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

2 个答案:

HTML

CSS

IE支持