将 div 左右对齐答案

【问题标题】：align divs left and right next to each other将 div 左右对齐
【发布时间】：2017-11-02 00:53:38
【问题描述】：

我不确定我这样做是否正确。

试图在同一行左右对齐 div，但是当我调整窗口大小时，右侧 div 会下降并保持在右侧。

我将如何重新对齐 div，以便当我缩小窗口时，右侧下拉并与左侧 div 对齐，也许两个 div 居中？

我需要用<lu> 将它们添加到网格列表中吗？

另外我将如何对齐电话号码？

.text-center {
  text-align: center!important;
}

.text-left {
  text-align: left!important;
}

.text-right {
  text-align: right!important;
}

.right {
  float: right!important
}

.left {
  float: left!important
}

<div class="left">
  <h2>Infomation:</h2>
  <p>
    Phone: (00) 00000000<br/> Fax: (00) 00000000<br/> Email: <a href="mailto:contact@email.com ">contact@email.com<br/></a>
  </p>
</div>

<div class="right text-right">
  <h2>Business Hours:</h2>
  <p>
    Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
  </p>
</div>

【问题讨论】：

你为什么不尝试使用引导程序？它让你的生活更轻松
@Salman 我想用纯 html、css 和 javascript 做事，以了解一切是如何完成的，减少事情发生的机会。
您能否更清楚地说明您在调整窗口大小时希望如何显示？
如果你不使用 bootstrap，你必须将你的父元素设置为 @media screen 和子元素
@kannan 当我调整右 div 的大小时，它仍然向右浮动。我希望这样当一个 div 下降时，两者都对齐。所以两者都向左或居中浮动。

标签： html css

【解决方案1】：

我建议为此使用媒体查询。逻辑很简单。首先，为小屏幕设置 CSS 规则。然后使用媒体查询应用新的 CSS 规则来处理窗口宽度超过特定宽度。

.text-center {
  text-align: center!important;
}    
.text-left, .text-right {
  text-align: left!important;
}    
.left, .right {
  display: block;
}    
@media all and (min-width: 400px) {
  .left {
    float: left!important
  }
  .right {
    float: right!important
  }
  .text-right {
    text-align: right!important;
  }
}

【讨论】：

【解决方案2】：

我不明白你想在调整窗口大小时如何显示我假设你想显示在第一个 div 旁边，所以只需要 .right css。

.right {
    float: left
}

【讨论】：

【解决方案3】：

将display: inline-block; 添加到您的.left 和.right div。此外，即使在小屏幕尺寸上，要使这些 div 始终左右对齐，请在两者中添加 max-width: 49%;。

希望对你有帮助

【讨论】：

【解决方案4】：

即使窗口更小，也要让两个 div 在一行上，只需使用以下样式即可：

  <style>

div{
        float: left;
        width: 45%;
        padding: 2%;
    }
</style>

【讨论】：

【解决方案5】：

使用这样的设置值将信息包装在另一个 Div 容器（WrapperContainer）中。

<div class="WrapperContainer">
<div class="row">
<div class="col-md-6">
<h2>Infomation:</h2>
<p>
Phone: (00) 00000000<br/> Fax: (00) 00000000<br/> Email: <a  href="mailto:contact@email.com ">contact@email.com<br/></a>
</p>
</div>
<div class="col-md-6">
<h2>Business Hours:</h2>
<p>
Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
</p>
</div>
</div>
</div>

然后是风格。自定义尺寸和高度以满足您的需求。如果您的分辨率发生变化，容器框不会因此结果是固定的。

.WrapperContainer{
Width:800px;
height:300px;
float: left;
}

【讨论】：

【解决方案6】：

在我看来，最好的方法是先使用小屏幕，然后由@media 决定何时应该在两侧发送。

这是一个基本示例，设置为 680 像素，使用您需要的任何值。您还可以添加其他断点。（播放 sn-p ful 页面以在一行中查看两个框）

我在示例中使用了 flex 和一个包装器来最小化要编写的代码，而不是 float。

如果您希望保持自己的方式，请在媒体中使用您的浮动规则:)

@media screen and (min-width:680px) {
  .box {
    display: flex;
    justify-content: space-between;
  }
  .text-right {
    text-align: right;
  }
}

<h style="font-size:3vw" 1>Play me full page and resize window</h1>
<div class="box">
  <div class="left">
    <h2>Infomation:</h2>
    <p>
      Phone: (00) 00000000<br/> Fax: (00) 00000000<br/> Email: <a href="mailto:contact@email.com ">contact@email.com<br/></a>
    </p>
  </div>

  <div class="right text-right">
    <h2>Business Hours:</h2>
    <p>
      Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
    </p>
  </div>
</div>

【讨论】：

【解决方案7】：

您可以使用bootstrap 使其具有响应性，因为您需要先安装引导程序，然后使用以下代码：

<div class="row">
    <div class="col-md-6">
      <h2>Infomation:</h2>
      <p>
        Phone: (00) 00000000<br/> Fax: (00) 00000000<br/> Email: <a href="mailto:contact@email.com ">contact@email.com<br/></a>
      </p>
    </div>

    <div class="col-md-6">
      <h2>Business Hours:</h2>
      <p>
        Monday - Thursday<br/> 8:30 - 5:00<br/> Friday <br/> 8:30 - 3:30<br/>
      </p>
    </div>
</div>

【讨论】：

OP 不需要引导解决方案。