简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - 三栏式布局可以用浮动+百分比吗？
大家讲道理
大家讲道理 2017-04-11 13:26:13
0
6
693

网上看到很多都是绝对定位法，margin负值法，自身浮动法，但是全部浮动设置百分比也行，不知道这种有没其他问题；

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>Title</title>
    <style>
        p{
            float: left;
        }
        .left,.right{
            background: #000;
            width: 30%;
            height: 50px;
        }
        .mid{
            height: 50px;
            width: 40%;
        }
    </style>
</head>
<body>
<p class="left"></p>
<p class="mid"></p>
<p class="right"></p>
</body>
</html>
大家讲道理
大家讲道理

光阴似箭催人老，日月如移越少年。

reply all(6)
巴扎黑
巴扎黑2017-04-11 13:28:13 6 floor

其实实现的方式有很多种，个人喜好问题，我想你是想要一种实现起来比较优雅的方法，不用考虑浮动后塌陷或者别的其他因素的。所以我推荐你使用 flex 布局。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>flex</title>
</head>
<style>
  .box {
    display: flex;
    justify-content: space-between;
  }
  .st {
    width: 100px;
    height: 100px;
    background: blue;
  }
</style>
<body>
<p class="box">
  <p class="st left"></p>
  <p class="st mid"></p>
  <p class="st right"></p>
</p>
</body>
</html>

效果如下：

附上 flex 文章链接 : Flex 布局教程：实例篇

如果对你有用，希望采纳！

Like +0
Add Reply
小葫芦
小葫芦2017-04-11 13:28:13 5 floor

浮动可以，但是会导致父元素高度塌陷

Like +0
Add Reply
刘奇
刘奇2017-04-11 13:28:13 4 floor 
<style>
    .clearfix:after{
        display: block;
        content: '';
        overflow: hidden;
        height: 0px;
        width: 0px;
        clear: both;
    }
    .clearfix{
        zoom: 1;
    }
    p{
        float: left;
    }
    .left,.right{
        background: #000;
        width: 30%;
        height: 50px;
    }
    .mid{
        height: 50px;
        width: 40%;
    }
</style>
<p class="clearfix">
    <p class="left"></p>
    <p class="mid"></p>
    <p class="right"></p>
</p>

自身感觉用float的时候 清除浮动 还没有遇见问题

Like +0
Add Reply
洪涛
洪涛2017-04-11 13:28:13 3 floor

这样直接用浮动和百分比的话，考虑到浏览器宽度发生改变时，写起来和看起来就很不爽了。

Like +0
Add Reply
小葫芦
小葫芦2017-04-11 13:28:13 2 floor

可以啊。你还可以用display:inline-block;

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-11 13:28:13 1 floor

浏览器宽度小到一定程度就破板了；这三个外面包到一个定宽的容器里防止这种情况的发生；
PS：再给你一个纯CSS3的，自带响应式效果；（别和我说还有浏览器不支持这样的屁话）

<html>
<header></header>
<style type="text/css" media="screen">
    body{
        margin: 0;
        font-size: 16px;
        position: relative;
    }
    .container{
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        max-width: 1920px;
        min-width: 1000px;
        margin: 0 auto;
        min-height: 100%;
        position: relative;
    }
    .flex1,.flex2,.flex5{
        min-height: 100%;
        position: relative;
    }
    .flex1{
        flex: 1;
        min-width: 100px;
        background-color: red;
    }
    .flex2{
        flex: 2;
        min-width: 200px;
        max-width: 200px;
        background-color: blue;
    }
    .flex5{
        flex: 5;
        background-color: orange;
    }
</style>
<body>
    <p class="container">
        <p class="flex1">
            Left Block
        </p>
        <p class="flex5">
            Flex-size Blcok
        </p>
        <p class="flex2">
            Right Block
        </p>
    </p>
</body>
</html>
Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！