css 如何在HTML中并排对齐

gywdnpxw 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(155)

<div class="w3-row w3-padding-64 ws-black">
  <div style="max-width:1400px;margin:auto">
    <div class="w3-col l6 w3-center" style="padding:2% 3%;">
      <div class="w3-card-2 w3-round" style="color:black;background-color:#FFC0C7;padding:24px">
        <h2 style="font-size:45px;float:left;font-weight:700">COM</h2>
        <div style="height:50px;">
        </div>
        <a href="com.html" class="w3-button tut-button black-color w3-margin-bottom">Learn COM</a>
      </div>

    </div>
    <div class="w3-col l6 w3-center" style="padding:2% 3%;">
      <div class="w3-card-2 w3-round" style="background-color: #FFF4A3;color:black;padding:24px">
        <h2 style="font-size:45px;float: left;font-weight:700">PduR</h2>
        <div style="height:50px;">
        </div>
        <a href="Pdur.html" class="w3-button tut-button black-color w3-margin-bottom">Learn PduR</a>
      </div>
    </div>

给你
1.我需要使com和pdur并排，但它正在下降
1.接下来，我需要删除Learn com链接，而不是如果有人点击com，它应该移动到下一页
1.我附上了截图

css

来源：https://stackoverflow.com/questions/75432568/how-to-align-side-by-side-in-html

2条答案

按热度按时间

polhcujo1#

可以使用css的flex属性并排对齐内容

.main{
display: flex}

<div class="main">
<div>1</div>
<div>2</div>
</div>

赞(0）回复(0）举报 2023-02-14

wz3gfoph2#

您可以使用弹性框将两个项目对齐。
CSS如下所示：

.flex-container {
  display: flex;
}

.flex-item {
  flex: 1;
}

<div class="flex-container">
  <div class="flex-item">Div 1</div>
  <div class="flex-item">Div 2</div>
</div>

将flex-item类添加到两个div中：

<div class="w3-col l6 w3-center" style="padding:2% 3%;">

如果您不希望使用Flexbox，也可以使用float：
一个三个三个一个

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何在HTML中并排对齐

2条答案

相关问题

热门标签

最新问答