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

Posted 2023-03-07

【中文标题】如何将响应式文本 div 放在另一个响应式 div 旁边

【英文标题】：How to put a responsive text div next to another responsive div

【发布时间】：2016-12-19 18:28:46

【问题描述】：

我有一个包含图像的 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>

【问题讨论】：

您可以尝试使用百分比宽度并设置min-width。

这反应在哪里？现在您只是允许内容确定这些容器的宽度。

响应能力是我想要弄清楚的。理想情况下，当我缩小窗口时，图像和文本框会缩小到某个点，然后文本框会下降到下方

您可以更改标记还是要求保持标记与示例中的相同？

我有完全的权限来改变我想要的任何东西

【参考方案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 条件 cmets 为 IE 提供外部样式表（首选） 在现有样式表中使用 CSS hack 来为 IE 提供支持

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

【参考方案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" >
</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>

它可能最适合你。

【讨论】：

我们公司决定不使用引导程序。