В основном у меня есть три 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>
Предполагая этот 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;
}
Zero поля с помощью селекторов: :first-child
и last-child
:
.mydiv:first-child {
margin-left: 0;
}
.mydiv:last-child {
margin-right: 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>
он работает, есть небольшая разница в ширине, но вы не можете узнать.