Поместите тот же DIV дважды в ту же строку с пробелом между ними

Question

Я хочу поместить тот же div дважды в ту же строку и покрыть всю его ширину, и мне нужно поместить некоторое пространство между ними.

Проблема заключается в том, что я использую маржу, это будет влиять на них обоих, поскольку они имеют один и тот же класс, поэтому второй div будет идти ниже другого, потому что общая ширина станет больше, чем ширина контейнера.

Я пытался использовать переполнение:. Скрытый или overflow-x:hidden с запасом или изменить их размер, но ничего не изменилось (и я пытался использовать границы с переливом скрытого)

Я вынужден использовать много DIV из тех же класс, и мне нужно, чтобы они покрывали всю ширину строки.

Edit: код большой, так что я отправлю небольшой пример, чтобы объяснить, что мой вопрос

<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 divs в той же строке, что я бы сделал, это не делать это в пикселях, а с%.

Например, что я хотел бы сделать это:

Дайте DIV, что вы хотите на право идентификатор права и тот, который вы хотите на левой стороне идентификатором слева:

<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

Может ли это быть чем-то вроде вас?

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 + левый край + правый край) никогда не будет больше ширины контейнера строк.

Answer 3

Возможно, вы захотите дать им разные имена классов или идентификаторы, если вы хотите манипулировать ими двумя разными.

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

Вы можете использовать встроенный дисплей, чтобы они отображались в одной строке.

.block1, block2 { 
display: inline; 
} 

Оттуда вы можете создать их как хотите, выбрав любой из этих классов.