Question

我想在相同的行上放置两次相同的div并覆盖它的所有宽度，我需要在它们之间放置一些空格。

问题是，当我使用保证金时，它会影响它们，因为它们具有相同的类，所以第二个div将低于另一个，因为总宽度将变得大于容器宽度。

我尝试使用溢出：隐藏或overflow-x:hidden带边距或更改其大小但没有任何更改。（我也尝试使用溢出隐藏的边框）

我被迫使用同一个类中的许多div，我需要它们来覆盖行的所有宽度。

编辑：代码很大所以我会发一个小例子来解释我的问题

<div class="container">
    <div class="block">content...</div>
    <div class="block">content...</div>
</div>

<style>
.container{width:1000px; margin:0px auto;}
.block{width:480px;height:500px;float:left;}
</style>

我想放第一块+ 40px空间+第二块

Answer 1

如果你想在同一行上放置两个.block div，我会做的不是以像素为单位，而是使用％＆＃39; s。

例如我要做的是：

将您想要的div右侧的id和右侧的ID称为左侧的id：

<div class="container">
<div class="block" id="right">content...</div>
<div class="block" id="left">content...</div>
</div>

然后我会用

来设置它

<style>
.container{width:1000px; margin:0px auto;}
.block{width:48%;height:500px;display:inline;}
#left{float:left;}
#right{float:right;}
</style>

您可以使用确切的宽度百分比来达到您的标准。

Answer 2

如果你想操纵它们中的两个不同，你可能想要给它们不同的类名或id。

<div class="container">
<div class="block1">content...</div>
<div class="block1">content...</div>
</div>

您可以使用内嵌显示使它们出现在同一行中。

.block1, block2 {
display: inline;
}

从那里，您可以通过选择其中任何一个类来为它们设置样式。

Answer 3

这可能是你之后的事吗？

http://jsfiddle.net/justin_thomas/9S46N/

CSS：

.myRow {
   width:48em;
}
.myclass {
   padding: 1em;
   margin-left:1em;
   margin-right:1em;
   float: left;
   display:inline;
   width: 20em;
}

HTML：

<div class="myRow">
  <div class="myClass">Blah... blah...</div> 
  <div class="myClass">Blah... blah...</div> 
</div>

在那里，我使用花车来获得理想的效果。不幸的是，这意味着如果您不能以物理单位（或其父项之一）指定行容器的实际宽度，那么您将很难，并且您还需要知道将有多少列。在这一行中用作带有div的类中的宽度量。

我不太喜欢这个解决方案，因为您需要确保每个（div宽度+左边距+右边距）的总和不会大于行容器的宽度。

将相同的DIV放在同一行上两次，它们之间有空格

3 个答案: