Question

我有下面的代码。我希望第二个div，蓝色的宽度与红色的div相同，蓝色的div的文本在垂直和水平方向上居中对齐。

我不能使用flexbox或grid，因为需要旧的浏览器支持。

    .red, .blue {
      color: white;
    }

    .red {
    background-color: red;
    }

    .blue {
    background-color: blue;

    }

    .row{ 
      overflow: auto;
     }
     
    .row::after {
      content: "";
      clear: both;
      display: table;
    }

    [class^="col-"] {
        float: left;
    }

    .col-3 {
        width: 30%;
    }


    .col-7 {
        width: 70%;
    }

<div class="row">
      <h1> Example 1</h1> 
      <div class="col-3 red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
      <div class="col-7 blue">ipsum ipsum</div>
</div>

Answer 1

您可以使用display: table(-cell)代替浮点数。兼容性IE8 +。不要忘记激活table-layout: fixed，这样浏览器将尊重您设置的宽度，并且不会尝试尽最大努力处理“单元格”的内容。
注意：此CSS显示模式与HTML表格无关，当然，后者默认情况下使用相同的算法。这不是HTML布局表。

您需要将标题移到“行”之外。您无法像使用Flexbox或float那样包装。

    .red, .blue {
      color: white;
    }

    .red {
    background-color: red;
    }

    .blue {
    background-color: blue;

    }

    .row{ 
      overflow: auto;
      display: table;
      width: 100%;
      height: 100%;
      table-layout: fixed;
     }
     
    .row::after {
      content: "";
      clear: both;
      display: table;
    }

    [class^="col-"] {
        /*float: left;*/
        display: table-cell;
        height: 100%;
    }

    .col-3 {
        width: 30%;
    }


    .col-7 {
        width: 70%;
    }

<h1> Example 1</h1> 
<div class="row">
      <div class="col-3 red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
      <div class="col-7 blue">ipsum ipsum</div>
</div>

Answer 2

还是类似的东西？

.red, .blue {
      color: white;
    }

    .red {
    background-color: red;
    }

    .blue {
    background-color: blue;

    }

    .row{ 
      overflow: auto;
     }
     

    [class^="col-"] {
        display:table-cell;
        width: 30%;
    }


    .col-7 {
        text-align:center;
        vertical-align: middle;
    }
    .row::after {
      content: "";
      display: table-cell;
      width: 40%;
    }

<div class="row">
      <h1> Example 1</h1> 
      <div class="col-3 red">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
</div>
      <div class="col-7 blue">ipsum ipsum</div>
</div>

浮动对齐垂直和水平居中

2 个答案: