Question

目前，我在使用3列设计响应式布局时遇到问题。首先，我希望它们在相邻列中对齐，我已经使用％widths并将它们浮动到左侧。当页面缩小时，我希望第1列和第3列分别出现在彼此的上方和下方，并且第2列和第3列分别位于它们的右侧。这就是我希望它们的样子：

正常布局

调整大小时的通缉布局

调整大小时的当前布局

问题在于，当我调整页面大小时（因此使用调整列的％宽度的css），第3列会向左移动，但它会显示在第2列末尾的下方：

以下是我正在使用的 html 的简化示例：

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

css ，n.b。给出的高度仅为示例，并将在实际站点中动态更改：

.left {
    height: 10em;
    background-color: red;
    width: 15%;
    float: left;
}
.mid {
    height: 20em;
    background-color: blue;
    width: 70%;
    float: left;
}
.right {
    height: 5em;
    background-color: green;
    width: 15%;
    float: left;
}

@media only screen and (max-width: 500px) {
    .left {
        width: 30%;
    }
    .right {
        width: 30%;
    }

}

Here's a fiddle of the above in action

其他尝试

我可以说出问题所在，但我不知道解决方案是什么。重新排序html以便第三列位于其他列之间并且向右浮动列适用于大型布局，然后对于较小的布局我尝试将第三列浮动到左侧并使用clear:both，但是正如您在this fiddle中所看到的那样，第二列低于第一列。

如果我设置第3列的位置，例如，我可以达到预期的效果。 position:relative;top:-200px，但这似乎是一种不准确的方法。

Answer 1

请参阅示例fiddle

HTML：

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

CSS：

.mid {
 position:absolute;
 top:0px;
 right:0px;
 }
.right {
 float: left;
 clear:left;
 }

Answer 2

如果您愿意使用flex布局并且可以修复组的高度，那么......

...更改媒体查询中子div的顺序以及flex-direction和flex-wrap中的更改都可以解决问题。修复包装器的高度，使其与最高的子div一样大。

小提琴：https://jsfiddle.net/abhitalks/h0j4eLL0/2/

<强>段：

＆＃13;

.wrap { display: flex; }
.left {
  height: 10em; width: 15%;
  background-color: red;
}
.mid {
  height: 20em; width: 70%;
  background-color: blue; 
}
.right {
  height: 5em; width: 15%;
  background-color: green;
}

@media only screen and (max-width: 680px) {
  .wrap { flex-direction: column; flex-wrap: wrap; height: 20em; }	
  .left { width: 30%; order: 1; }
  .mid { width: 70%; order: 3; }
  .right { width: 30%; order: 2; }
}

＆＃13;

<div class='wrap'>
  <div class="left"></div>
  <div class="mid"></div>
  <div class="right"></div>
</div>

＆＃13;

Answer 3

我正在发送css和输出图像，这个css肯定会帮助你..
css代码

＆＃13;

body
{
background-color: #efefef;
}

.layout
{
	background-color: #006969;
	width: 100%;
	min-height:300px;
}

.layout .left{
width: 30%;
background-color: #696900;

float: left;
}
.layout .left .uppanel
{
	background-color: #efefefe;	
	height:150px;
	float: top;
}
.layout .left .downpanel
{
	background-color: #ffffff;	
	height:150px;
	float: bottom;
}
.layout .right{
width: 70%;
background-color: #cccccc;
height:300px;
float:right;
}

＆＃13;

<html>
<head>
	<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class="layout">
	
		<div class="left">
				<div class="uppanel">
					Left Panel - Up div
				</div>
				<div class="downpanel">
					Left Panel - down div
				</div>
		</div>
		<div class="right">
			Right Panel
		</div>
	</div>

</body>

＆＃13;

Answer 4

我会使用绝对定位。如果你像这样按css：

.left {
  height: 10em;
  position: absolute;
  left:0;
  background-color: red;
  width: 15%;
  float: left;
}
.mid {
  height: 20em;
  left:15%;
  position:absolute;
  background-color: blue;
  width: 70%;
  float: left;
}
.right {
  height: 5em;
  position:absolute;
  right:0;
  background-color: green;
  width: 15%;
  float: left;
}

@media only screen and (max-width: 400px) {
  .left {
    width: 30%;
  }
  .mid {
    width: 70%;
    left:30%;
  }
  .right {
    width: 30%;
    left:0;
    right:auto;
    top:10em;
  }

}

这只是一个例子，它如何适用于您的示例。在您的代码中，我将使用Javascript找出顶部/右侧和左侧定位。

您可以使用resize事件。

window.onresize = function(event) {
    // Do Positioning Stuff
};

这就是我这样做的方式。

Answer 5

将 margin-top：-140px; 添加到 @ media only屏幕中的 .right 和（max-width：500px） < / p>

或

您可以添加

.right{
position:relative;
bottom:140px;}

在500px的媒体查询代码中

3调整大小

正常布局

调整大小时的通缉布局

调整大小时的当前布局

Here's a fiddle of the above in action

其他尝试

5 个答案: