Почему мой край на моем поплавке неверен? - PullRequest
Новая
       17

Почему мой край на моем поплавке неверен?

0 голосов
/ 29 октября 2018

У меня есть поле для контента, в котором я хочу, чтобы блок div, который плавал влево, и параграфы вокруг него. Пока мой HTML выглядит так: 

.content {
  float: left;
  padding: 20px;
  width: 650px;
  height: 500px;
  background-color: #F5CF8E;
  /* Yellowish */
}

.fake-image {
  float: left;
  width: 200px;
  height: 200px;
  border: 0.5px solid gray;
  padding: 20px;
  margin: 0 20px 20px 0;
}
<div class="content">
  <div class="fake-image"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>

То, что я действительно не понимаю, это то, почему маржинальное дно: 20px; моего .fake-изображения не работает? Маржа больше. Кто-нибудь может помочь?

Вот изображение того, что я имею в виду:

enter image description here

Ответы [ 2 ]

0 голосов
/ 29 октября 2018

Это место не является дополнительным полем. Остальная часть высоты линии обтекания

enter image description here

Другими словами , линия, которая разрывается под изображением, может не полностью разрываться, чтобы соответствовать точному месту, где заканчивается ваше поле, если ваши линии не разделят это пространство каким-либо образом. Было бы неразумно пытаться контролировать это для большинства ситуаций, однако, гипотетически вы могли бы выполнить исправление, если бы оно было полностью статичным, но я не рекомендую пытаться делать это, потому что вы можете сражаться в тяжелом сражении.

Чтобы проверить это самостоятельно: удалите все поля, кроме вашего нижнего поля на изображении, и манипулируйте стилями линии и типографикой, чтобы увидеть, как они играют вместе, и / или манипулировать только нижним полем на этом изображении. изображение и / или высота изображения.

0 голосов
/ 29 октября 2018

Всякий раз, когда у меня возникает такая проблема, я добавляю специфичность в связанный CSS. margin в этом случае. margin: 0 20px 20px 0; сокращение для margin-top:0; margin-right: 20px; margin-bottom:20px; margin-left:0;

Зафиксируйте дно, зная также, что вокруг него.

Здесь я добавляю div вокруг него и устанавливаю его фон, чтобы вы видели, где на самом деле находится изображение. Другое пространство принадлежит другим элементам.

Теперь у нас есть уродливый красный и красный, мы можем видеть, что к чему, настроить это изображение, абзацы и т. Д., А затем мы можем позже удалить эти уродливые CSS-вещи. 

.content {
  float: left;
  padding: 20px;
  width: 650px;
  height: 500px;
  background-color: #F5CF8E;
  /* Yellowish */
}

.fake-image {
  float: left;
  width: 200px;
  height: 200px;
  border: 0.5px solid gray;
  padding:20px;
 /* margin-top: 0;
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px; */
  margin: 0 20px 20px 0; 
}
.outside-image{float: left;background-color:lime;}
p {border:1px solid red;}
<div class="content">
  <div class="outside-image"><div class="fake-image"></div></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam incidunt dolores atque ipsam expedita architecto, dignissimos error consectetur aperiam. At harum in optio voluptatibus ex beatae praesentium eius velit cum!</p>
</div>
...