javascript - 如何根据屏幕尺寸使左右各有 2 个 div 的 div 响应并带有图像

Question

假设我有一个包含 2 个 div 的 div，

有没有办法让它根据屏幕尺寸做出响应？ 我想将它应用到移动版本，但我搞砸了......

<div id="primary">
<div id="left"><div id="object1" align='justify'>
<br/><br/>
<p>
If you told me this was a computer generated image of a mothership hovering over a planet's surface, I would have believed you. Instead, I had to look up desmids, which turned out to be a form of green algae. I would have guessed this is a cell in the process of dividing, but it turns out that one of the characteristic features of desmids is that they're a single cell divided into two compartments. (See, even I'm learning something from this.) Desmids are so tiny that this image was taken at 100x power. The green backdrop? It's a moss.
</p>
</div></div>

<div id="right"><div id="object3">
<b><h2>title</h2></b>
<img class="align-right" alt="" src="http://cdn.arstechnica.net/wp-content/uploads/2012/10/09_Place_22047_3_Drange.jpg"  style="width:200px" /></div></div></div>   

图片和div我不知道如何根据屏幕尺寸缩小...

请看at a jsfiddle 事实上，我无法让 div 容纳 2 列图像在下方且不在左列的同一级别...

Answer 1

为此，您还有百分比填充和边距，只需应用一些数学...

LeftDiv(padding:1% + margin:1% + width:44%) + RightDiv(padding:1% + margin:1% + width:44%) = 100%

padding 和 margin 是 top,bottom,left, right 1%,1%,1%,1%...

CSS:-

#left, #right {
    margin: 1%;
    padding: 2%;
    width: 43%;
}

如果您希望图像也具有响应性，请使其 width:100%;

http://jsfiddle.net/FgnpL/5/