suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Frontend – CSS, eine Zeile, aufgeteilt in zwei Spalten

Die Konstruktionszeichnung gibt an, dass die Länge des linken Blocks 218px ist, aber ich habe keine Möglichkeit, die Länge des nächsten Blocks in derselben Reihe zu bestimmen. Ich hoffe, dass der letztere Block die aktuelle Reihe automatisch füllen kann Rat

Der aktuelle css Stil des ersten Stücks ist:

   float: left;
   width: 218px;

Rendering:

滿天的星座滿天的星座2808 Tage vor1052

Antworte allen(6)Ich werde antworten

  • 阿神

    阿神2017-05-27 17:46:16

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

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

    Antwort
    0
  • 仅有的幸福

    仅有的幸福2017-05-27 17:46:16

    左边的块可以position: absolute;绝对定位。右边的块直接margin-left: 218px;然后display:block;

    Antwort
    0
  • PHPz

    PHPz2017-05-27 17:46:16

    1.父级{display:flex;},右边{flex:1}

    2.右边{float:left;width:calc(100% - 218px);}

    Antwort
    0
  • 高洛峰

    高洛峰2017-05-27 17:46:16

    后一块{

    width:calc(100% - 218px);
    float: left;

    }

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-05-27 17:46:16

    百分比可以吧

    Antwort
    0
  • 过去多啦不再A梦

    过去多啦不再A梦2017-05-27 17:46:16

    flex是一种解决办法,但很多时候现在要求兼容IE8等低端浏览器,flex就不行了。
    提供另外一种解决方案:
    结构:

    <p class="box">
        <p class="left">left</p>
        <p class="right">right</p>
    </p>

    样式:

    .left, .right {
            height: 30px;
        }
        .left {
            float: left;
            width: 200px;
            background: #f90;
        }
        .right {
            background: #369;
            overflow: hidden;
        }

    Antwort
    0
  • StornierenAntwort