почему div не был центром между двумя div - PullRequest
Новая
       12

почему div не был центром между двумя div

0 голосов
/ 12 июня 2019

Я только начинаю изучать css, и я хочу сделать два div по краям, и div, у которого есть класс, называемый широким. Я хочу центрировать его, поэтому я ставлю его в абсолютное положение и слева: 50%, но это не работает 

.container{
    background-color:#6699;
    width: 900px;
    height:600px;
    margin:20px auto;
    position: relative
}

.tall{
    background-color:#993399;
    width: 200px;
    height:100%;
    float: right
}

.wide{
    background-color:#6600cc;
    width:200px;
    height:200px;
    position: absolute;
    left:50%
}


.tall2{
    background-color:#006699;
    width:200px;
    height:100%;
}
<!DOCTYPE html>
<head> 
    <link rel="stylesheet" href="float.css">
</head>
<body>
    <div class="container">
        <div class="tall"></div>
        <div class="wide"></div>
        <div class="tall2"></div>
        
    </div>
</body>

Ответы [ 3 ]

2 голосов
/ 12 июня 2019

Не совсем понятно, что вы пытаетесь сделать, но, скорее всего, вам лучше подойдет макет flex или grid.Плавания обычно не являются лучшей практикой для таких макетов.

Вы можете попробовать что-то вроде этого: 


.container {
  display: flex;
}

.tall, .tall2 {
  width: 200px;
}

.wide {
  flex: 1;
}
0 голосов
/ 12 июня 2019

Это можно сделать в стиле display: table;, display: table-row и display: table-cell. 

.container {
  background-color: #6699;
	width: 100%;
}

.tall {
  background-color: #993399;
}

.wide {
  background-color: #6600cc;
	width: auto;
}

.tall2 {
  background-color: #006699;
}

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

.tall,
.tall2 {
  width: 200px;
}

* {
  height: 100%;
}
<!DOCTYPE html>

<head>

</head>

<body>
  <div class="table container">
    <div class="row">
      <div class="cell tall"></div>
      <div class="cell wide"></div>
      <div class="cell tall2"></div>
    </div>
  </div>

</body>
0 голосов
/ 12 июня 2019

Если вы пытаетесь выровнять «широкий» div по горизонтали, добавьте преобразование в div следующим образом: 

.wide{
    background-color:#6600cc;
    width:200px;
    height:200px;
    position: absolute;
    left:50%;

    /* Over Here */
    transform: translateX(-50%);
}
...