Блог

Главная - Вопросы по программированию - плавающая и переносная ширина содержимого

плавающая и переносная ширина содержимого

#css #css-float

#css #css-float

Вопрос:

Почему, если я добавлю ширину к своему основному контенту, он больше не будет обтекать мой плавающий div?

 <div style="float:left;width:30%;">
   content1 content1 content1 content1 content1 content1 content1 content1
</div>

<div id="mainContent" style="width:30%;">
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
</div>

https://jsfiddle.net/ty9wuLeh/4/

Комментарии:

1. Если ‘content 2’ должен быть «вокруг» ‘content1’, вам нужно будет поместить первый div во второй. jsfiddle.net/ty9wuLeh/5

2. Извините, я думаю, что я был недостаточно точен. Я знаю, как сделать ‘content 2’ «вокруг» ‘content1’: мне просто нужно удалить ширину в div ‘MainContent’. Но я хотел знать причину, по которой это работает так? каков алгоритм для вычисления отображения?

3. Тогда в чем вопрос…………………?

4. Что касается того, почему это происходит: если вы проверите выходные данные, вы увидите (по крайней мере, в Chrome), что div фактически перекрывает первый div, я думаю, что содержимое mainContent div совпадает с содержимым первого div. Технически, хотя mainContent div — это полная ширина страницы. Чтобы получить то, чего вы хотите достичь, вы также можете просто float:left mainContent использовать div.

5. Да, я согласен, что второй div накладывается на первый div. Но почему добавление или удаление ширины в основном содержимом изменяет поведение переноса? Я знаю, что это работает таким образом, но я не понимаю логической причины этого. Я имею в виду: указывая ширину основного содержимого, интуитивно я просто хочу ограничить ширину этого div, не изменяя его поведение переноса. Итак, почему этот побочный эффект?

Ответ №1:

Ваш плавающий div файл должен содержаться в вашем mainContent div :

     <div id="mainContent">
    <div style="float:left;width:30%;">
      content1 content1 content1 content1 content1 content1 content1 content1
    </div>
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
      content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 content2 
    </div>

https://jsfiddle.net/ty9wuLeh/6/