Question

当设备宽度低于900px时，我试图重新排列3个div。它们排列成三列（2个浮动div，中间是主要的一个），我不知道如何使它们成为2列，第3个div位于它们之下（Image表示我是什么目标）。提前谢谢你:)

按照你的要求添加代码:)这里是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>

这里是css

#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;

}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;

}

如果我使右边的div浮动：无，则移动中间div

Answer 1

您需要使用媒体查询 https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

享受

Answer 2

使用媒体查询和flex。

这是一个片段，（点击然后运行全屏）。

<div class="flex">
    <div class="sub c">1</div>
    <div class="sub c">2</div>
    <div class="doge c">3</div>
</div>

＆＃13;

    .flex{
        display: flex;
        flex-wrap: wrap;
    }
    .c{
      height:20px;
      width:20px;
      border: 1px solid green;
      box-sizing: border-box;
      }

    @media(max-width:600px){
     .sub{
        width: 50%;
      }
     .doge{
        width: 100%
      }
    }

＆＃13;

<div class="flex">
  <div class="sub c"></div>
  <div class="sub c"></div>
  <div class="doge c"></div>
</div>

＆＃13;

Answer 3

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

作为一个例子，你可以为左列添加float：left，然后在右侧跟随中间列。通过使用clear重新定义右列（类）：右列将成为页脚。这只是一个例子，并不是最好的解决方案。

Answer 4

这是我对它的看法。

＆＃13;

/* Styles go here */

body,html{
  margin: 0;
  padding: 0;
  height:100%;
}


.wrapper{
  height:100%;
  width:100%;
  padding: 20px;
}

.div1{
  height:100%;
  width:30%;
  float:left;
  background-color:orange;
}

.div2{
  height:100%;
  width:30%;
  float:left;
  margin-left:2%;
  background-color:red;
  
}

.div3{
  height:100%;
  width:30%;
  margin-left:2%;
  float:left;
  background-color:green;
}

@media(max-width:900px){
  
  .wrapper{
  height:100%;
  width:100%;
  clear:both;
}
  
  .div1{
    height:70%;
    width:49%;
    float:left;
    background-color:orange;
  }
  
  .div2{
    height:70%;
    width:49%;
    float:left;
    background-color:red;
    
  }
  
  .div3{
    height:30%;
    width:100%;
    float:left;
    margin:20px 0 20px 0;
    background-color:green;
  }
  
}

＆＃13;

<div class="wrapper">
      <div class="div1"><p></p></div>
      <div class="div2"><p></p></div>
      <div class="div3"><p></p></div>
</div>

＆＃13;

Answer 5

欢迎来到{以不祥的声音} RESPONSIVE DESIGN的世界！，

要执行您要执行的操作，您需要浏览Media Queries。

以下是您尝试执行的操作示例：JSFiddle

<强> HTML

<?xml version="1.0" encoding="UTF-8"?>
<persistence version="2.0"
  xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_2_0.xsd">
  <persistence-unit name="mev" transaction-type="JTA">
    <provider>org.hibernate.jpa.HibernatePersistenceProvider</provider>

    <properties>
      <property name="hibernate.connection.url" value="jdbc:h2:mem:mev;DB_CLOSE_DELAY=-1" />
      <property name="hibernate.dialect" value="org.hibernate.dialect.H2Dialect"></property>
      <property name="hibernate.connection.driver_class" value="org.h2.Driver" />
      <property name="hibernate.hbm2ddl.auto" value="update" />
      <property name="hibernate.connection.release_mode" value="after_transaction" />
      <property name="hibernate.connection.password" value="admin" />
      <property name="hibernate.connection.username" value="admin" />
    </properties>
  </persistence-unit>
</persistence>

<强> CSS

<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>

祝你好运！

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

5 个答案: