css两列等高

最新推荐文章于 2024-06-15 21:20:00 发布

七夜的许愿星yj

最新推荐文章于 2024-06-15 21:20:00 发布

阅读量93

点赞数

文章标签： html css 前端

本文链接：https://blog.csdn.net/nishiweiyj/article/details/126443670

版权

#### css 表格布局
```
<html>

<head>
    <style>
        .compare {
            width: 100%;
            border: 1px solid black;
            height: 100px;
            margin-bottom: 10px;
        }
        
        .container {
            /* 显示为table的元素宽度不会扩展到100%，因此需要明确指定宽度 */
            display: table;
            width: 100%;
            border: 1px solid black;
            border-spacing: 1.5em .5em;
        }
        
        .main {
            display: table-cell;
            width: 70%;
            background-color: #fff;
            border-radius: .5em;
            border: 1px solid black;
        }
        
        .sidebar {
            display: table-cell;
            width: 30%;
            /* 外边距并不会作用于table-cell元素 */
            /* margin-left: 1.5em; */
            padding: 1.5em;
            /* border-spacing作用于单元格之间和表格的外边缘 */
            background-color: #fff;
            border-radius: .5em;
            border: 1px solid black;
        }
        
        .wrapper {
            margin: 0 -1.5em;
        }
    </style>
</head>

<body>
    <div class="compare"></div>
    <div class="wrapper">
        <div class="container">
            <div class="main">xxxxxxxxxxxxxxxxxxxxx</div>
            <div class="sidebar">yyyyyyyyyyyyyyyyy</div>
        </div>
    </div>

    <script>
    </script>
</body>

</html>
```
#### flex 布局
ie9 建议使用flex 布局
```
<html>

<head>
    <style>
        .compare {
            width: 100%;
            border: 1px solid black;
            height: 100px;
            margin-bottom: 10px;
        }
        
        .container {
            display: flex;
            border: 1px solid black;
        }
        
        .main {
            width: 70%;
            background-color: green;
            border-radius: 0.5em;
            border: 1px solid black;
        }
        
        .sidebar {
            display: table-cell;
            width: 30%;
            padding: 1.5em;
            margin-left: 1.5em;
            background-color: yellow;
            border-radius: .5em;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="compare"></div>
    <div class="container">
        <div class="main">xxxxxxxxxxxxxxxxxxxxx</div>
        <div class="sidebar">yyyyyyyyyyyyyyyyy</div>
    </div>

    <script>
    </script>
</body>

</html>


<!-- 除非别无选择，否则不要明确设置元素的高度。先寻找一个替代方案。设置高度一定会导致更复杂的情况。 -->
```