Как бы я мог держать горизонтальные div (3 в ряд) с полями между ними, встроенными в обертку?

Question

Как бы я мог держать горизонтальные div (3 в ряд) с полями между ними, встроенными в обертку?

0

В основном у меня есть три div в строке, каждая с запасом 10px между ними в ответном макете.

В настоящее время divs имеют margin-left: 10px; margin-right: 10px; в них держать их на расстоянии друг от друга. Тем не менее, я хотел бы оставить его в строчке с оберткой, короче говоря, без полей в конце, где начало первого div и конца последнего div встречается с оберткой, поэтому оно идеально вписывается в оболочку.

Как я мог это сделать?

Благодарю!

Код:

CSS -

#frontpage {
float: left;
width: 32.33%;
margin-left: 0.5%;
margin-right: 0.5%;

}

HTML в выход Wordpress:

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

    <aside id="frontpage" class="widget widget_text">
<h3 class="widget-title">Quickplay</h3>
<div class="textwidget"><p>Content Here</p>
</div>

Jcsh 17 апр. 2014, в 01:57

Источник

1

Какой твой настоящий код?
Dryden Long 16 апр. 2014, в 23:05
0

почему вы не хотите маржи в начале первого и в конце последнего div? не будет ли это выглядеть немного странно?
StackUP 16 апр. 2014, в 23:24
0

@StackUP Контейнер для раздела уже центрирован там, где я хочу его в дизайне. Мне просто нужны поля между ними, так как поля на концах каждой области будут только увеличивать их.
Jcsh 16 апр. 2014, в 23:30

Показать ещё 1 комментарий

Теги:

html

css

3 ответа

0

Zero поля с помощью селекторов: :first-child и last-child:

.mydiv:first-child {
    margin-left: 0;
}
.mydiv:last-child {
    margin-right: 0;
}

bjb568 16 апр. 2014, в 21:31

0

Если вы разделите его на 33%, это будет 99 + margin/padding, это перейдет на 100%. поэтому третий div появится в следующей строке. вы будете иметь ширину. проверьте, работает ли он. хотя он не идеален, но все же намного ближе к тому, что вы ищете.

<style>
  #one{display:inline; float:left; width:32.7%; }
#two{display:inline; float:left; width:33%;  margin-left:10px; margin-right:10px;}

<div id="big_wrapper">
 <div id="one"> this is first div and your content goes here. this is first div and   your content goes here</div>
  <div id="two">this is second div and your content goes here. this is second div and your content goes here</div>
  <div id="one">this is third div and your content goes here. this is third div and your content goes here/div>

он работает, есть небольшая разница в ширине, но вы не можете узнать.

StackUP 16 апр. 2014, в 20:53

Ещё вопросы

почему вы не хотите маржи в начале первого и в конце последнего div? не будет ли это выглядеть немного странно?
@StackUP Контейнер для раздела уже центрирован там, где я хочу его в дизайне. Мне просто нужны поля между ними, так как поля на концах каждой области будут только увеличивать их.

Oriol · Accepted Answer · 2014-04-16T20-29-00.000Z

Предполагая этот HTML-код

<div id="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

и этот CSS:

#wrapper > div {
    float: left;
    margin: 0 10px;
}

Затем используйте этот CSS:

#wrapper > div {
    float: left;
    margin-left: 20px;
}
#wrapper > div:first-child {
    margin-left: 0;
}