问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css布局的问题

头像
include
    20884770
    <html>
    <head>
        <title></title>
        <style>
            body {
    background: #e6ecf0;
}
    .container {
        max-width: 100%;
    }
    .dashboard ,.dashboard-right{
        display: none;
    }
    
@media (min-width: 910px){
    .container {
        max-width: 900px;
    }
    .dashboard{
        display: block;
    }
}
@media (min-width: 1236px){
    .container {
        max-width: 1190px;
    }
    .dashboard{
        display: block;
    }
}
        .container {
            text-align: center;
            padding-right: 15px;
            padding-left: 15px;
            margin-right: auto;
            margin-left: auto;
        }

.dashboard{
    float: left;
    width: 290px
}
.content-main{
    float: left;
    min-width: 590px;
    margin: 0 10px;
}
        </style>
    </head>
    <body>
        <div class="container">
            <div class="dashboard dashboard-left" style="height:100px;background:green;"></div>
            <div class="content-main" style="height:200px;background:red;"></div>
            <div class="dashboard dashboard-right" style="height:100px;background:blue;"></div>
        </div>
    </body>
</html>

    页面宽的时候是这样的。
    图片描述
    当页面宽度到达一定程度的时候，就变成了这样：
    图片描述
    我希望蓝色的高度不要收红色的影响，直接就在绿色下面应该怎么调整呢？

    csshtml
    阅读 1.8k
    1 个回答
    得票最新
    头像
    CRIMX
      9.1k2720

      这种情况不需要浮动红色，固定红色浮动蓝绿。同时因为浮动是不能高过元素在流中的位置的，所以调换蓝红位置。

      供参考

      <html>

  <head>
    <title></title>
    <style>
      body {
        background: #e6ecf0;
      }
      
      .container {
        max-width: 100%;
        text-align: center;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
      }
      
      .dashboard {
        display: none;
        width: 290px;
      }

      .content-main {
        min-width: 590px;
        margin: 0 10px;
      }
      
      @media (min-width: 910px) {
        .container {
          max-width: 900px;
        }

        .dashboard {
          display: block;
        }
        
        .dashboard-left {
          float: left;
        }
        
        .dashboard-right {
          float: left;
          clear: both;
        }
        
        .content-main {
          margin: 0 300px;
        }
      }
      
      @media (min-width: 1236px) {
        .container {
          max-width: 1190px;
        }
        
        .dashboard {
          display: block;
        }
        
        .dashboard-left {
          float: left;
        }
        
        .dashboard-right {
          float: right;
          clear: none;
        }
        
        .content-main {
          margin: 0 300px;
        }
      }

    </style>
  </head>

  <body>
    <div class="container">
      <div class="dashboard dashboard-left" style="height:100px;background:green;"></div>
      <div class="dashboard dashboard-right" style="height:100px;background:blue;"></div>
      <div class="content-main" style="height:200px;background:red;"></div>
    </div>
  </body>

</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题