Question

我有一个div标签的时钟和另一个div标签中的地址。我想在左侧显示时钟，在右侧显示地址。现在时钟下方显示现在的地址。

<div class="new">
   <div class="clock">
    //my clock code
   </div>       //end of clock div
   <div class="address">
      <p> </p> //address 
   </div>       //end of address div
</div>          //end of new div

css
  .new .clock{
    margin:0;
    padding:10px 0px 0 0;
    float:left;
   }
  .address{
   margin:0;
   padding:30px 0px 50px 0px;
   text-align:right;
   }

Answer 1

表示时钟：float: left;

地址：float: right;

但是如果浏览器窗口太小，它们将再次出现在彼此之下

Answer 2

只需添加一个浮点数：左边的地址。

但填充看起来有点奇怪

Answer 3

尝试使用以下代码

.clock {
display:inline-block;
width:40%;

}

.address {
    display:inline-block;
    width:40%;
}

你可以类似地使用float，但你需要给父元素一个像

这样的样式

.clock {
    float:left;
}

.address {
   float:right;
}

.new{ clear:both; }

Answer 4

我创建了一个快速小提琴here，以显示如何并排放置2个div的示例。

这是它的CSS代码。我为每个div添加了一个浮动属性，使它们占总页面宽度的40％（只要它们不超过100％就可以更高）。

.clock {
      margin:0;
      padding:10px 0px 0 0;
      float:left;
      width:40%;
  }
  .address {
      margin:0;
      padding:10px 0px 0 0;
      text-align:right;
      float:right;
      width:40%;
  }

如何为div标签添加css

4 个答案: