0

как это сделать?

w по середине страницы, с лева от нее q с права от нее e а под ними, на всю их ширину стоит e

я пытаюсь, а оно всё расползается в разные стороны, пожалуйста подскажите

.q,
.w,
.e,
.r {
  width: 100px;
  padding: 10px;
  background: #fc0;
  position: relative;
}
.q {
  background-color: red;
}
.w {
  float: auto;
  background-color: green;
}
.e {
  background-color: #ff11ff;
}
.r {
  float: auto;
  background-color: #ff1155;
}
<html>

<head>

  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <link rel="stylesheet" type="text/css" href="111.css">
  </head>

  <body>
    <div class="q">q
    </div>
    <div class="w">w
    </div>
    <div class="e">e
    </div>
    <div class="r">r
    </div>

  </body>

</html>

3 ответа 3

2

Ну а если вдруг окажется что блоки не должны быть растянуты на всю ширину, то -

.q,
.w,
.e,
.r {
  width: 100px;
  padding: 10px;
  background: #fc0;
  position: relative;
  
  display: inline-block;
}
.q {
  background-color: red;
}
.w {
  background-color: green;
}
.e {
  background-color: #ff11ff;
}
.r {
  width: auto;
  background-color: #ff1155;
  display: block;
}

.container {
  text-align: center;
  
  float: left;
  
  position: relative;
  
  left: 50%;
  
  transform: translate(-50%);
}
<div class="container">
  <div class="q">q</div>
  <div class="w">w</div>
  <div class="e">e</div>
  <div class="r">r</div>
</div>

2
  • благодарю, а можете еще подсказать, как внутрь Q добавить пару div-ов ?
    – user210479
    28 ноя 2016 в 14:47
  • Что значит пару div'ов? Каких? Опишите их подробнее.
    – user220409
    28 ноя 2016 в 15:45
1

.q,
.w,
.e {
  width: 33.33%;
  float: left;
}
.r {
  width: 100%;
  float: left;
/*   padding: 10px; */
  background: #fc0;
  position: relative;
}
.q {
  background-color: red;
}
.w {
  background-color: green;
}
.e {
  background-color: #ff11ff;
}
.r {
  background-color: #ff1155;
}
<div class="q">q</div>
<div class="w">w</div>
<div class="e">e</div>
<div class="r">r</div>

1

Вот так можно сделать, или надо сохранить ширину 100px?

<div class="q">q</div><!--
--><div class="w">w</div><!--
--><div class="e">e</div>
<div class="r">r</div>

.q,.w,.e {  width: calc(100% / 3);
display: inline-block;
margin: 0;
}

.q {background-color: red;}

.w {background-color: green;}

.e {background-color: #ff11ff;}

.r {background-color: #ff1155;}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.