Question

我找到了如何在一个屏幕尺寸上将两个div放在同一行上，但我无法使其响应。右图像位于左侧div下方。这是我的CSS和HTML

<div id="my-wrapper" style="
    max-width: 941px;
    width: auto;
    height: auto;">
  <div class="left-stuff" style="
    float: left;
    max-width: 100px;
    width:  auto;
    height: auto;">
        <img alt="" src="blah1.png" 
            style="width: auto; height: auto; max-width:100px;">
        <img alt="" src="blah2.png" 
            style="width: auto; height: auto; max-width: 100px;">
       <img alt="" src="blah3.png" 
            style="width: auto; height: auto; max-width: 100px;">
    </div>
    <div class="right-stuff" style="float:right;">
    <img src="banner.png" style="width: auto; height: auto; max-width:100%;">
    </div></div>

可以在此处找到一个示例：http://jsfiddle.net/TachionFiddle/c9EYe/4/

Answer 1

Floats也不会起作用，因为它会将其从布局中撕掉。

我建议inline-block并在每个上设置width:50%。

你必须确保图片永远不会破坏你的div，所以做max-width: 95%或者不到那个。取决于有多少。

Answer 2

首先请研究将样式移动到CSS样式表中。

这是对您的问题的快速抨击 - 请注意这在IE 8及以下版本中无法正常工作：

<div id="my-wrapper" style="
max-width: 941px;
width: auto;
height: auto;">
<div class="left-stuff" style="
   float: left;
   max-width: 20%;
   width:  100%;
   -moz-box-sizing:border-box;
   -webkit-box-sizing:border-box;
   box-sizing:border-box;
   height: auto;">
      <img alt="" src="blah1.png" 
        style="width: auto; height: auto; max-width:100px;">
      <img alt="" src="blah2.png" 
        style="width: auto; height: auto; max-width: 100px;">
      <img alt="" src="blah3.png" 
        style="width: auto; height: auto; max-width: 100px;">
  </div>
<div class="right-stuff" style="max-width:80%;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:right;">
<img src="banner.png" style="width: auto; height: auto; max-width:100%;">
</div></div>

这里有3处变化：

1）以百分比指定宽度 - 因此无论屏幕有多大，div都会缩放以匹配

2）box-sizing：border-box - 这改变了浏览器渲染div宽度以包括填充和边框的方式。如果你指定宽度：50％和填充：20px没有边框，你最终得到一个50％宽+ 20px填充的div当然大于50％。 border-box强制该框的TOTAL宽度为50％;

3）max-width相当自我解释 - 通过将左框的宽度设置为20％而将右框设置为80％，组合宽度将始终填充父元素提供的空间

如何在同一条线上放置两个div并使它们具有响应性？

2 个答案: