Question

我完全冻结脑部，我很乐意帮助解决它。

我有2个div元素。左右叫：

我希望正确的元素具有320px的固定宽度，而左边的元素应该是自动的。因此，当我缩小浏览器窗口时，只有左侧元素应该变小。

如果左边的元素是固定的，而不是正确的元素，我可以使它工作。

左侧工作代码：

.left {width: 320px;float: left;background:#CCC;}
.right { margin-left: 320px; background:#FFFF00; }

不是正确的工作代码：

.left_two { margin-right: 320px; background:#FFFF00; }
.right_two {width: 320px;float: right;background:#CCC; }

但这就是我希望它的表现方式。

您可以在此处关注我的代码和项目:(只需缩小浏览器窗口）

http://www.adamskymotorkylare.se/project/new.php

谢谢杰克

Answer 1

将您的html structure改为，如此

<div class="left">left</div>
<div class="right">right</div>

<div class="right_two">right</div>
<div class="left_two">left</div>

<强> Demo

Answer 2

嗨请尝试使用css的calc属性

我正在提供一个wrough演示代码

HTML

 <section class="container">
             <div>
        <div id="ds">
            left div
        </div>
        <div  class="flRight width320">
            right div
        </div>
    </div>
    <div class="clear"></div>
    <div>
        <div class="width320">
            left div
        </div>
        <div id="ds2">
            right div
        </div>
    </div>

    </section>

CSS

.container > div > div{float:left;
 border:1px solid red;
}

.clear{clear:both;}

.flRight{float:right;}

.width320{width:320px;}

 #ds{width:calc(99% - 320px);}

#ds2{width:calc(99% - 320px);}

注意：请查看有关calc http://css-tricks.com/a-couple-of-use-cases-for-calc/

的更多信息

Answer 3

使用CSS表格显示属性：

<div style='display:table'>
  <div class='display:table-cell; width: 320px;'>
     Left Column
  </div>
  <div class='display:table-cell;'>
     Right Column
  </div>
</div>

两个div元素，一个固定，另一个是auto。怎么修？

3 个答案:

HTML

CSS