html - CSS 一行分成两列

问题描述

问 题

设计图上规定左边块的长度是218px，但是我没有办法确定同一行后一块的长度，我期望后一块可以自动填满当前行，求教

目前第一块的css样式就是：

   float: left;
   width: 218px;

效果图：

解决方案

<style type="text/css">
        .row{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-content: center;
            align-items: stretch;
            height: 50px;
        }
        .div1{
            width: 218px;
            flex-shrink: 0;
            background-color: #3c8dbc;
        }
        .div2{
            width: 1%;
            flex: 1;

            background-color: #5b9909;
        }
    </style>
    
    <div class="row">
        <div class="div1">123123123123123</div>
        <div class="div2">1232131</div>
    </div>

flex 你值得拥有 但是记得加前前缀

这篇关于html - CSS 一行分成两列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！