Question

我已经搜索了几天的高低，并试图将两个div并排（每个50％宽）和第二个div低于100％宽......还有两个顶级div需要随着响应性的变化而改变。即当屏幕尺寸为960px宽时，右侧div落在左侧div下方。

我已经尝试过这段代码，但是当您开始缩小浏览器大小时，正确的div显示较小。

我确信这一切都错了，但对我来说这是一个学习阶段，对于一个基本问题我很抱歉！任何帮助都会很棒!!!

抱歉......我可以发布一张图片来解释，但为了帮助清理它，我需要一行，两个div并排（每个50％宽）和第二行，1个占用100的div ％宽度。

OK！我现在可以添加一个我需要实现的图像！图像1,2,3将具有不同的尺寸以及图像下方的文本量。布局（示例）图像不是按比例绘制的，并且在网站上需要一个清晰的背景（没有颜色）背景颜色只是为了显示示例中不同的div。

Sample layout

这就是应该如何看待响应......

Responsive example

HTML：

<div class="custom_div">
<div id="one">one</div>
<div id="two">two</div>
<div id="three">three</div>
</div>

CSS：

.custom_div {
overflow:hidden;
}
.custom_div div {
min-height: 100%;
padding: 10px;
text-align: center;
}
#one {
background-color: gray;
float:left;
margin-right:0px;
width:50%;
}
#two {
background-color: white;
overflow:hidden;
margin-right: 20px;
margin: 1px;
width:auto;
min-height: 50%;
}
#three {
background-color: yellow;
margin-right:auto;
margin-left:auto;
width: 100%;
}
@media screen and (max-width: 600px) {
#one {
    float: none;
    margin-right:0;
    width:auto;
}
}

Answer 1

<强>更新

Demo Fiddle

这是确保在不同内容级别上正确调整大小的唯一简单方法：

HTML

<div class='table'>
    <div class='cell'></div>
    <div class='cell'></div>
    <div class='caption'></div>
</div>

CSS

.table {
    display:table;
    width:100%;
}
.cell {
    display:table-cell;
}
.caption {
    display:table-caption;
    caption-side:bottom;
}
.cell, .caption {
    height:20px;
    border:1px solid black;
}
@media screen and (max-width: 960px) {
    .table .cell, .caption {
        display:block;
    }
}

原始答案

下面怎么样？

Demo Fiddle

HTML

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

CSS

div {
    border:1px solid black;
    box-sizing:border-box;.
    -moz-box-sizing:border-box;
}
.left, .right {
    width:50%;
}
.left {
    float:left;
}
.right {
    float:right;
}
@media screen and (max-width: 600px) {
    .left, .right {
        width:auto;
        float:none;
    }
}

Answer 2

查看更新的小提琴： http://jsfiddle.net/PEvLt/3/

我删除了不必要的属性。问题在于填充和边距。你应该添加的东西总是使用BOX-SIZING属性。当您使用％

中定义的宽度/高度的填充时，它会帮助您

有关Box-Sizing的更多信息。 http://css-tricks.com/box-sizing/

UPDATE ：您需要将第一列包装成一个单独的div，或者需要在前两列之后清除浮点数，以避免第三列重叠。

HTML：

<div class="first_two">
    <div id="one">
        <img src="http://lorempixel.com/500/200/" width="100%"/>
    </div>
    <div id="two">
        <img src="http://lorempixel.com/300/200/" width="100%"/>
    </div>
    <div class="clear"></div>
</div>
<div id="three">three</div>

CSS：

    *{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         
}
.first_two {
    background:#3498db;
    overflow:hidden;
}
#one {
    float:left;
    width:50%;
    height:100%;
}
#two {
    width:50%;
    float:left;
    height:100%;
}
#three {
    background-color:#8e44ad;
    width: 100%;
}
.clear{
    clear:both;
}
@media screen and (max-width: 600px) {
    #one,#two {
       width:100%;
    }
}

Answer 3

您可以尝试以下代码：

Working Demo

html, body{height:100%;}
.custom_div{width:100%;}
.custom_div div {
     background:#ccc;
     box-sizing:border-box;
     -moz-box-sizing:border-box;
 }
 #one, #two {
     width:50%;
     float:left;
     height:100%;
 }
 .clearfix{clear:both; display:block;}
 @media screen and (max-width: 960px) {
    #one, #two {
      width:auto;
      float:none;
    }
 }

Answer 4

您可以使用javascript

设置 body 标记的宽度

<script>
  document.getElementsByTagName("body")[0].style.width=screen.width+"px";
</script>

多个div响应css

4 个答案:

Demo Fiddle

Demo Fiddle