Html 将3个div列的布局更改为2个div列和下面的第3个div列_Html_Css

Html 将3个div列的布局更改为2个div列和下面的第3个div列

html css

Html 将3个div列的布局更改为2个div列和下面的第3个div列,html,css,Html,Css,当设备宽度低于900px时，我尝试重新排列3个div。它们被安排为三列（两个浮动分区和中间的主分区），我不知道如何使它们成为两列和它们下面的第三个分区（显示了我的目标）。提前感谢：）按要求添加代码：）这是html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="style.css"> &l

当设备宽度低于900px时，我尝试重新排列3个div。它们被安排为三列（两个浮动分区和中间的主分区），我不知道如何使它们成为两列和它们下面的第三个分区（显示了我的目标）。提前感谢：）

按要求添加代码：）这是html

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div id="container">
  <header></header>
  <div id="left"></div>
  <div id="right"></div>
  <div id="middle"></div>
</div>
</body>
</html>

如果我将right div float:none设置为right div，那么它将移动中间div

您需要使用媒体查询

享受

您需要使用媒体查询

享受

媒体查询和服务

下面是一个片段（单击run然后全屏）

带有媒体查询和

下面是一个片段（单击run然后全屏）

查看源代码，告诉您为什么它不起作用，这会很有帮助。至少你可以更详细地描述它。否则，我会怀疑这一点很清楚：两者都可以通过在媒体查询中重新定义div类来帮助您。至少这对我起了作用

例如，您可以将float:left附加到左侧列，然后中间列将跟随在右侧。通过使用clear：重新定义右列（类），右列和右列都将是页脚。这只是一个例子，并不是最好的解决办法

这是我的看法

/*样式在这里*/
正文，html{
保证金：0；
填充：0；
身高：100%；
}
.包装纸{
身高：100%；
宽度：100%；
填充：20px；
}
.1分部{
身高：100%；
宽度：30%；
浮动：左；
背景颜色：橙色；
}
.第2分部{
身高：100%；
宽度：30%；
浮动：左；
左缘：2%；
背景色：红色；
}
.第3分部{
身高：100%；
宽度：30%；
左缘：2%；
浮动：左；
背景颜色：绿色；
}
@介质（最大宽度：900px）{
.包装纸{
身高：100%；
宽度：100%；
明确：两者皆有；
}
.1分部{
身高：70%；
宽度：49%；
浮动：左；
背景颜色：橙色；
}
.第2分部{
身高：70%；
宽度：49%；
浮动：左；
背景色：红色；
}
.第3分部{
身高：30%；
宽度：100%；
浮动：左；
保证金：20px 0 20px 0；
背景颜色：绿色；
}
}

以下是我的看法

/*样式在这里*/
正文，html{
保证金：0；
填充：0；
身高：100%；
}
.包装纸{
身高：100%；
宽度：100%；
填充：20px；
}
.1分部{
身高：100%；
宽度：30%；
浮动：左；
背景颜色：橙色；
}
.第2分部{
身高：100%；
宽度：30%；
浮动：左；
左缘：2%；
背景色：红色；
}
.第3分部{
身高：100%；
宽度：30%；
左缘：2%；
浮动：左；
背景颜色：绿色；
}
@介质（最大宽度：900px）{
.包装纸{
身高：100%；
宽度：100%；
明确：两者皆有；
}
.1分部{
身高：70%；
宽度：49%；
浮动：左；
背景颜色：橙色；
}
.第2分部{
身高：70%；
宽度：49%；
浮动：左；
背景色：红色；
}
.第3分部{
身高：30%；
宽度：100%；
浮动：左；
保证金：20px 0 20px 0；
背景颜色：绿色；
}
}

欢迎来到{以不祥的声音}的世界

为了完成你想做的事情，你需要探索

以下是您正在尝试做的一个示例：

HTML

<div class="container">
  <div class="left">
   left content flexible width
  </div>
  <div class="right">
   right content fixed width
  </div>
  <div class="bottom">
   Bottom content flexible width
  </div>
</div>

祝你好运

欢迎来到{以不祥的声音}的世界

为了完成你想做的事情，你需要探索

以下是您正在尝试做的一个示例：

HTML

<div class="container">
  <div class="left">
   left content flexible width
  </div>
  <div class="right">
   right content fixed width
  </div>
  <div class="bottom">
   Bottom content flexible width
  </div>
</div>

祝你好运

欢迎来到StackOverflow！你试过什么？另外，请发布最少量的代码，向我们展示您所拥有的。您可能会提供一个小提琴，以便我们可以直接帮助您。我添加了一些代码，希望它能帮助您了解我的想法，并感谢您的欢迎！欢迎来到StackOverflow！你试过什么？另外，请发布最少量的代码，向我们展示您所拥有的。您可能会提供一个小提琴，以便我们可以直接帮助您。我添加了一些代码，希望它能帮助您了解我的想法，并感谢您的欢迎！这个答案介于实际答案和评论之间；你真的应该等到OP发布更多的信息。你可以将我的答案添加到你的代码中，只需将float left添加到名为“left”和“middle”的id中，并通过添加clear重新定义媒体查询中的“right”：就像我说的那样。当然，对于宽度>900px的设备，还必须定义right。Ced在上面发布的另一个解决方案很有趣。晚安（？）。这个答案介于实际答案和评论之间；你真的应该等到OP发布更多的信息。你可以将我的答案添加到你的代码中，只需将float left添加到名为“left”和“middle”的id中，并通过添加clear重新定义媒体查询中的“right”：就像我说的那样。当然，对于宽度>900px的设备，还必须定义right。Ced在上面发布的另一个解决方案很有趣。晚安（？）。我建议你不要使用display flex，因为在IE 9上，它不起作用，它成功了。。谢谢你的帮助！在接受之前，我会等待其他人是否有其他答案……我的投票不会改变公开显示的分数，因为我的分数不足15分。我建议你不要这样做

<div class="container">
  <div class="left">
   left content flexible width
  </div>
  <div class="right">
   right content fixed width
  </div>
  <div class="bottom">
   Bottom content flexible width
  </div>
</div>

.container {
  height: 100px;
  overflow: hidden;
}

.left {
   float: left;
  background: #00FF00;
  width: 25%;
  overflow: hidden;
  height: 100%;
}

.right {
  display: inline-block;
  width: 50%;
  background: #0000ff;
  height: 100%;
}

.bottom {
  float: right;
  background: #ff0000;
  display: inline-block;
  width: 25%;
  height: 100%;
}

@media only screen and (max-width: 900px) {
  .container {
    height: auto;
    overflow: hidden;
  }
  .left {
    float: left;
    background: #00ff00;
    width: 25%;
    overflow: hidden;
    height: 100px;
  }
  .right {
    float: none;
    width: 75%;
    background: #0000ff;
    height: 100px;
  }
  .bottom {
    position: relative;
    float: none;
    background: #ff0000;
    width: auto;
    overflow: hidden;
    height: 50px;
    display: inherit;
  }
}