CSS - Float Left + Padding = Последний Div Go Down?

3 столбца с плавающей точкой слева, каждая шириной 33,33%. И я добавил отступы, чтобы колонка выглядела более аккуратно. Но, по-видимому, последний DIV переносится на новую строку. Любое решение для этого? Здесь я также приношу репродукцию для справки.

* {
  padding:0;
  margin:0;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}
<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>


padding css css-float
person faliqaiman    schedule 15.11.2016    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Используйте box-sizing: border-box, который заставляет предоставленный размер быть полным размером, включая любой порядок и интервалы, такие как ваш отступ.

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}
<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

person Devin Burke    schedule 15.11.2016

arrow_upward
1
arrow_downward

К сожалению, заполнение по умолчанию не учитывается при изменении размера, поэтому ширина + заполнение фактически делает каждый из них шире, чем треть. box-sizing: border-box - замечательный инструмент для борьбы с этим, делая все отступы и границы частью измерения ширины:

* {
  padding:0;
  margin:0;
  box-sizing: border-box;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}
<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

person Jacob    schedule 15.11.2016

arrow_upward
1
arrow_downward

это из-за заполнения. попробуйте поставить box-sizing: border-box;, это сохранит width контейнера при объявлении заполнения.

* {
  padding:0;
  margin:0;
}
.row {
  width:80%;
  display:block;
  margin:40px auto;
  background: #f3f3f3;
  overflow:auto;
}
.col {
  float:left;
  width:33.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:20px;
  box-sizing: border-box;
}

.ful-dark {
  opacity:0.9
}

.mid-dark {
  opacity:0.8
}

.lil-dark {
  opacity:0.7
}
<div class="row">
  <div class="col ful-dark"><h1>One</h1></div>
  <div class="col mid-dark"><h1>Two</h1></div>
  <div class="col lil-dark"><h1>Three</h1></div>
</div>

person Ron.Basco    schedule 15.11.2016

arrow_upward
-1
arrow_downward

Вы хотите, чтобы 3 * (padding-right + padding-left + width) равнялось 100%.

Пытаться

.col {
  float:left;
  width:31.33%;
  background:#333;
  color:#fff;
  text-align:center;
  position:relative;
  padding:1%;
}
person twharmon    schedule 15.11.2016
comment
Вы не ошиблись, но вы делаете это нелегко. box-sizing: border-box делает это автоматически. - person Devin Burke; 15.11.2016