Question

我试图在屏幕的宽度上展开3个元素。我尝试过不同的方法但是当我使用inline-block时，第二个元素并不是中心。当我遗漏inline-block时，第三个元素显示在下一行。有什么建议吗？

＆＃13;

<html>
<head>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .base {
            display: block;
            height: 200px;
            background-color: #eeeeee;
        }
        .container {
        }
        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        .container {
        }
        #left {
            float: left;
        }
        #center {
            margin: auto;
        }
        #right {
            float: right;
        }
    </style>
</head>
<body>
    <div class="base">
        <div class="container">
            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        </div>
    </div>
</body>
</html>

＆＃13;

Answer 1

您可以使用以下CSS3来执行此操作。

＆＃13;

* {
            margin: 0px;
            padding: 0px;
        }
        .base {
            display: block;
            height: 200px;
            background-color: #eeeeee;
        }
        .container {
        }
        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        .container {
        display:flex;
        justify-content:space-between;
        }

＆＃13;

<div class="base">
        <div class="container">
            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        </div>
    </div>

＆＃13;

CSS解决方案

＆＃13;

* {
            margin: 0px;
            padding: 0px;
        }
        .base {
            display: block;
            height: 200px;
            background-color: #eeeeee;
        }
        .container {
        }
        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
        }
        .container {
          display:block;
          text-align:center;
        }
        #left{
          float:left;
        }
        #right{
          float:right;
        }
        #center{
          display:inline-block;
        }

＆＃13;

<div class="base">
        <div class="container">
            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        </div>
    </div>

＆＃13;

Answer 2

我建议您使用display:flex;

<html>
<head>
    <style>
        .base {
          
            height: 200px;
            background-color: #eeeeee;
            display:flex;
            justify-content:space-between;
           
        }

        .shape {
            width: 100px;
            height: 100px;
            background-color: #ff0000;
             align-self: flex-end;
        }
 
    </style>
</head>
<body>
    <div class="base">

            <div class="shape" id="left"></div>
            <div class="shape" id="center"></div>
            <div class="shape" id="right"></div>
        
    </div>
</body>
</html>

将我们的元素扩展到父宽度

2 个答案: