Как нужно было правильно оформить CSS для DIV?

Question

[Николай]

Как уменьшить количество написанного CSS ?

h1 {
			text-align: center;
			color: #FFF;
			margin: 0;
		}
		.wrapper{
			background: #34495e;
			width: 1000px;
			padding: 10px;
			margin: 0 auto;
			overflow: hidden;
		}

		.wrapper DIV DIV {
			background: #f1c40f;
			padding: 0 10px;
			height: 320px;
		}	
		.column-25 {
			width: 25%;
			float: left;
		}
		
		.column-50 {
			width: 50%;
			float:  left;
		}

		.column-50 DIV {
			margin:  0 10px;
		}

<div class="wrapper">
		<div class="column-25">
			<div>
				<h1>Заголовок 1</h1>
				<p>
				</p>
			</div>
		</div>
		<div class="column-50">
			<div>			
				<h1>Заголовок 2</h1>
				<p>
				</p>
			</div>
		</div>
		<div class="column-25">
                       <div>			
                               <h1>Заголовок 3</h1>
			        <p></p>
                       </div>
	        </div>
</div>

Answer 1

[Антон Нагаец]

Я бы сделал так codepen.io

<div class="wrapper">
<div class="column-25 yelloybg">
<h1>Заголовок 1</h1>
<p></p>
</div>
<div class="column-50 yelloybg">
<h1>Заголовок 2</h1>
<p></p>
</div>
<div class="column-25 yelloybg">
<h1>Заголовок 3</h1>
<p></p>
</div>
</div>

h1 {
      text-align: center;
      color: #FFF;
      margin: 0;
    }
    .wrapper{
      background: #34495e;
      width: 1000px;
      padding: 10px;
      margin: 0 auto;
      overflow: hidden;
    }
    .yelloybg {
      background: #f1c40f;
      height: 320px;
    }	
 .column-25 {width:23.333333333333%;} 
 .column-50 {width: 48.333333333333%;}
 *[class*="column-"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
float: left;
display: block;
}

Answer 2

[weredy]

Сделал так: https://jsfiddle.net/c3cLwaay/

Кстати так как сделал Антон Нагаец делает фреймфорк neat, так что у него проверенное решение. Да и сточки зрения адаптивности правильнее, меньше блоки - меньше маргины.

Но на всякий случай моё решение через статичные маргины:

<div class="wrapper">
    <div class="column-25">
        <h1>Заголовок 1</h1>
        <p>
        </p>
      </div>
    <div class="column-50">
        <h1>Заголовок 2</h1>
        <p>
        </p>
      </div>
    <div class="column-25">
                               <h1>Заголовок 3</h1>
              <p></p>
                       </div>
</div>

h1 {
      text-align: center;
      color: #FFF;
      margin: 0;
    }
    .wrapper{
      padding: 10px;
      width: 1000px;
      margin: 0 auto;
      overflow: hidden;
    }

    .column-25,.column-50 {
      background: #f1c40f;
      height: 320px;
      border: 10px #34495e solid;
      margin-right: -10px;
      box-sizing: border-box;
    }
    
        
    .column-25 {
      width: 25%;
      float: left;
    }
    
    .column-50 {
      width: 50%;
      float:  left;
    }
    
    .column-25:last-child {
      margin-right: 0px;
    }

Comments

[Антон Нагаец]

;) это 960GS grid его видимо многие фреймворки используют. Действительно проверенное решение.