Html 我如何在同一条线上定位两个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>

---

这里可以找到一个例子：

首先，请研究如何将样式移动到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） 框大小：边框框-这会更改浏览器渲染div宽度的方式，以包括填充和边框。如果指定宽度：50%和填充：20px而不使用边框框，则最终得到的div是50%宽+20px填充，当然大于50%。边框框强制框的总宽度为50%

---

3） 最大宽度不言自明-通过将左框的宽度设置为20%，右框的宽度设置为80%，组合宽度将始终填充父元素提供的空间，因为浮动会将其从布局中剥离出来

我建议使用

内联块

并在每个块上设置

宽度：50%

---

你必须确保图像不会弄破你的div，所以要做

最大宽度：95%

或小于此值的事情。取决于有多少链接。

你能与图片共享一个实时链接吗？我已经放置了链接。是的，这只是一个简单的例子，看看我怎么做。很明显，我不会在实际的HTML中添加那么多样式。谢谢你的回答，我正在调查每个人都写了些什么。我还没试过这个，但看起来很有希望。如果上面的答案没有给出跨浏览器的答案，我将更仔细地研究您的答案。我得到了这个JSFIDLE链接中显示的结果：我做错了什么？它不起作用的原因是容器元素上的最大宽度：100px，并且因为您没有设置display:inline block：这可能更符合您的要求。我还为图像添加了最大宽度：100%：我修改了你所做的，得到了这个：但我正在尝试使它看起来像这样：