Question

我有以下html：

<div class="left">
this is left side. it should go to the bottom when in one column
</div>
<div class="right">
this is right side. it should go to the top when in one column
</div>

的CSS：

.left {
    width: 70%;
    float: left;
    background-color: red;
}
.right {
    width: 30%;
    float: left;
    background-color: yellow;
}

 @media only screen and (max-width : 768px) {
   .left, .right {
        width: 100%;
     }
}

我希望当显示为一列时，使右列保持在顶部。

以下是jsfiddle链接：https://jsfiddle.net/m7zpoc30/1/

请随时建议我应该做些什么，包括改变我当前的CSS。

谢谢！

Answer 1

这是使用flex的解决方案，这可能是有意义的。您可以使用display:flex将左右div包装在容器中，然后在调整大小时使用flex-direction。请参阅下面的代码段。（jsfiddle）

.container {
  display: flex;
  
}

.left {
  width: 70%;
  background-color: red;
}

.right {
  width: 30%;
  background-color: yellow;
}

@media only screen and (max-width: 768px) {
  .container {
    flex-direction: column-reverse;
  }
  .left, .right {
    width: 100%;
  }
  
}

<div class="container">
  <div class="left">
    this is left side. it should go to the bottom when in one column
  </div>
  <div class="right">
    this is right side. it should go to the top when in one column
  </div>
</div>

Answer 2

更改div的顺序，使右边首先显示在html中，并将HttpApplication div更新为class="right"

https://jsfiddle.net/m7zpoc30/3/

Answer 3

这里是使用order flex属性的替代解决方案。请参见下面的代码段。

@Configuration
public class DataSourceConfig {

    @Bean("dataSource")
    @Primary
    @ConfigurationProperties("spring.datasource")
    public DataSource dataSource() {
        return DataSourceBuilder.create().build();
    }

}

@Autowired
private DataSource dataSource;

try(Connection conn= dataSource.getConnection();
       PreparedStatement ps = conn.prepareStatement(inserQuery);) {
    .....
}catch(Exception e){
    ....
}

响应页面：在一列中使右列保持在顶部

3 个答案: