Question

我不确定我是否正确行事。

尝试在同一条线上左右对齐div，但是当我调整窗口大小时，右边的div会向下移动并保持在右边。

我如何重新对齐div，以便当我使窗口变小时，右侧下降并与左侧div对齐，可能将两个div都居中？

我是否需要使用grep "\sinstalled" combined_dpkg.log | sort -k1 | awk '!a[$5]' | cut -d " " -f1,5,6 | uniq -c将其添加到网格列表中？

另外，我如何调整电话号码？

＆＃13;

<lu>

＆＃13;

.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
}

＆＃13;

Answer 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;
  }
}

Answer 2

我不明白当你调整窗口大小时你想要显示的方式我假设你想要显示在第一个div的旁边那么只有.right css。

.right {
    float: left
}

Answer 3

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

希望这有帮助

Answer 4

即使窗口较小，也要将两个div放在一行上，只使用以下风格而不是其他：

  <style>

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

Answer 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;
}

Answer 6

我的观点中的最佳方法是首先显示屏幕，然后@media决定何时应该在双方发送。

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

相反浮点数，我在示例中使用了flex和一个包装器来最小化要编写的代码。

如果您希望按照自己的方式使用媒体内的浮动规则：）

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 7

您可以使用bootstrap进行响应，因为您需要首先安装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>

将div左右对齐

7 个答案: