时间戳

首页 > 解决方案 > 想要在一个 div 内制作 3 个不同宽度的 div

html - 想要在一个 div 内制作 3 个不同宽度的 div

问题描述

我正在尝试在另一个 div 中创建 3 个 div。这三个 div 具有不同的宽度。第一个 div 包含一张图片。我想将单个 div 的内容放在其各自的中心以及容器 div 内。

HTML

 <div id="container">
        <div id="left">
            <img src="Pictures\38fafe4c2faaa7d207b0115720dedd21.jpg" alt="Pic Not available" 
            class="maskpic">
        </div>
        <div id="middle">
            <p class="firstmiddle">
                STAY HOME,
            </p>
            <p class="secondmiddle">
                STAY SAFE.
            </p>
        </div>
        <div id="right">
            <p>
                Contactless Deliveries
                <br><br>
                All delivery staff trained in COVID-19<br>preventive measures
                <br><br>
                All Delivery and warehouse staff are equipped with<br>medical-grade hand Sanitizers
                <br><br>
                All warehouse staff undergo daily mandatory<br>thermal temperature scanning
                <br><br>
                No deliveries in 'highly affected' areas
            </p>
        </div>
    </div>

CSS

#container {
width: 100%;
height: 200px;
}
#left, #middle, #right { color: #333333; }
#left {
display: inline-block; *display: inline; zoom: 1; vertical-align: top;
}
.maskpic {
    height: 100px;
    width: 25%;
} 
#middle {
    display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 58px
} 
#right {
    display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 18px;
}
#left {
    width: 25%; background:#C0C0C0;
}
#middle {
    width: 50%; background: #C0C0C0;
}
#right {
    width: 25%; background:#C0C0C0;
}

标签： htmlcss

解决方案

有一个快速解决方法。尝试使用 grid 或 flex 将所有内容居中。

该容器可以使用FLEX，因为它易于设置；“我认为您的意图是使用 display: inline-block 使 div 出现在一行中，问题在于根据显示它不会按您的预期工作。所以我使用了 flex-box 与在一定程度上单独显示尺寸。”

里面的 div 被制作成GRID以满足您想要的中心对齐。“我使用网格是因为它只需要一条线即可将所有内容居中：place-items:center;但请注意，它必须只有一个直接子级，这样它就不会创建新行。如果你想在里面添加许多标签，只要确保将它们放在一个父母之下。”

例子：

<div style="display:grid;place-items:center">
  <div> 
    ... items here ... 
  </div>
</div>

有关 flex 和 grid 的更多信息：

#container {
width: 100%;
display:flex;
align-items:stretch;
}
#left, #middle, #right {
display:grid;
place-items:center;
color: #333333;
background: #C0C0C0;
width: 25%;
font-size: 14px;
padding:1rem;
}
.maskpic {
    height: 100px;
    width: 25%;
}
#middle {
    width: 50%; 
    font-size: 48px
}
<div id="container">
        <div id="left">
            <img src="Pictures\38fafe4c2faaa7d207b0115720dedd21.jpg" alt="Pic Not available" 
            class="maskpic">
        </div>
        <div id="middle">
            <p>
                STAY HOME, <br>STAY SAFE.
            </p>
        </div>
        <div id="right">
            <p>
                Contactless Deliveries
                <br><br>
                All delivery staff trained in COVID-19<br>preventive measures
                <br><br>
                All Delivery and warehouse staff are equipped with<br>medical-grade hand Sanitizers
                <br><br>
                All warehouse staff undergo daily mandatory<br>thermal temperature scanning
                <br><br>
                No deliveries in 'highly affected' areas
            </p>
        </div>
    </div>

推荐阅读