Розгорніть div до максимальної ширини, коли float: встановлено ліворуч

115

У мене є щось таке:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

обидва поплавця необхідні. Я хочу, щоб вміст div заповнив весь екран за мінусом 100 пікселів для меню. Якщо я не використовую float, div розгортається саме так, як слід. Але як я встановити це, коли встановлено float? Якщо я використовую що-небудь як

style=width:100%

то вміст діва набуває розміру батьківського, який є або тілом, або іншим дівом, який я також спробував, і, звичайно, він не відповідає правильному меню, а потім показаний нижче.

html width

— Flo
джерело

138

Сподіваюся, я вас зрозумів правильно, погляньте на це: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Розгорніть фрагмент

— меркуро
джерело

5

Питання зазначає, що "обидва поплавця необхідні".

— Півмісяць свіжий

8

Так, ви праві, і я згоден. Однак я думаю, що Фло згадав лише про це, бо він думає, що вони обоє! необхідний для отримання потрібного макета, і тому моє альтернативне рішення.

— merkuro

@merkuro: хороший момент. Я погоджуюсь, "правильне" не потрібно плавати, щоб отримати бажаний ефект. @Flo: чи можете ви підтвердити, чи повинен бути розміщений розділовий вміст? Як з інших причин?

— Півмісяць Свіжий

може попрацювати, я спробую трохи розібратися з цим, ви зрозуміли, що це правильно, і поплавок приємніше, але я вважаю, що це просто не буде працювати

— Flo

2

А-а-е, і я знову бачу причину, чому я змінив його на плавання: Ie7 і Firefox роблять добре, але тобто 5,5 і тобто 6 починають поле з правого краю лівого діва, тому він має 236 пікселів (реальна ширина, 100 був приклад) розрив між обома дивами

— Flo

100

Найбільш сумісний спосіб, який я знайшов робити це, не дуже очевидний. Потрібно вийняти поплавок з другого стовпця і застосувати overflow:hiddenдо нього. Хоча це, здається, приховує будь-який вміст, що виходить за межі діва, це насправді змушує діву залишитися в межах його батьків.

Використовуючи свій код, це приклад того, як це можна зробити:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Сподіваюсь, це корисно для всіх, хто має цю проблему, саме те, що я вважав, працює найкраще для сайту, який я будував, після спроби змусити його адаптуватись до інших резолюцій. На жаль, це не спрацьовує, якщо ви також додасте divправо вміст після вмісту, якщо хтось знає хороший спосіб змусити його працювати, з хорошою сумісністю IE, я б дуже радий почути це.

Новий, кращий варіант використання `display: flex;`

Тепер, коли модель Flexbox досить широко впроваджена, я фактично рекомендую використовувати її замість цього, оскільки вона дозволяє набагато більше flexздібностей з компонуванням. Ось простий двоколонний на зразок оригіналу:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

А ось триколонка з центральною колоною з гнучким шириною!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>

— alanaktion
джерело

Після деякого подальшого тестування виявляється, що вам не потрібно запускати hasLayout з "позицією: відносно", щоб це працювало в IE 6, я не впевнений у IE 5, але як правило, це не проблема включити його, просто для безпеки.

— alanaktion

1

Ця відповідь здається не оціненою, але це дійсно добре знати. Цей дозволяє вам плавати, навіть із плаваючим елементом всередині div. I'mma google "контекст блокування форматування". зараз.

— Карлос Гіл

Найкращий спосіб - скористатися простою таблицею з 2 cols замість того, щоб витрачати час, додаючи тонни хитрощів, сумісних з браузером, не підтримуючи CSS

— Marco Demaio

@Marco Мені потрібно було використовувати CSS для цього, оскільки моя конструкція чуйна. Різні розміри екрана потребували різних макетів, тому таблиця не працювала б. Крім того, схоже, цей метод працює в основному в будь-якому браузері, який все ще використовує.

— alanaktion

1

@MarcoDemaio, моя думка полягала в тому, що на розмірі екрана, де менший фіксований стовпець буде приблизно таким же великим, як і основний стовпець, наприклад, на мобільному пристрої, я хотів, щоб два стовпці стали рядками повної ширини, що не вдалося зробити з таблицями, якщо я не хотів фактично переміщати вміст за допомогою JavaScript.

— alanaktion

31

Рішення без фіксації розміру за вашим полем

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 для Merkuro, але якщо розмір float зміниться, ваш фіксований запас не вдасться. Якщо ви використовуєте вище CSS праворуч, divвін добре змінить розмір із зміною розміру на лівій поплавці. Це трохи більш гнучко, як це. Перевірте загадку тут: http://jsfiddle.net/9ZHBK/144/

— Заповіт
джерело

2

@alanaktion Я забрав непотрібне авто. Різниця полягає у значенні переповнення. Мабуть overflow: hiddenі overflow autoпризводять до тієї ж поведінки. Я також думаю, що люди цінують Скрипку.

— Заповіт

Якщо хто -то хоче знати , чому це працює, дивіться тут: stackoverflow.com/a/1767270/2756409

— TylerH

Я думаю, що це краще, ніж рішення меркуро.

— SkuraZZ

6

Елементи, що плавають, виймаються із звичайної схеми потоку, а елементи блоку, такі як DIV, більше не охоплюють ширину батьківського елемента. Правила змінюються в цій ситуації. Замість того щоб винаходити колесо, перевірити цей сайт для деяких можливих рішень , щоб створити два стовпці макета ви після: http://www.maxdesign.com.au/presentation/page_layouts/

Зокрема, "Рідкий макет з двома колонками".

Ура!

— Шон Ейткен
джерело

4

Це оновлене рішення для HTML 5, якщо хтось зацікавлений і не любить "плавати".

Таблиця чудово працює в цьому випадку, оскільки ви можете встановити фіксовану ширину таблиці та клітинці таблиці.

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ оригінальний вихідний код від @merkuro

— Сніжок
джерело

+1 нарешті щось, що працює з елементом фіксованої ширини праворуч, навіть якщо він технічно не використовує float.

— Karthik T

+1 так повністю так. після багатьох років боротьби з поплавками та позиціями та столами - це правильне рішення. прийняте рішення поширює небезпечний css.

— Горацій

4

таке використання може вирішити вашу проблему.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>

Розгорніть фрагмент

— суатд
джерело

Ласкаво просимо до SO. Чи можете ви додати пояснення, як це працює?

— yacc

3

І виходячи з merkuroрішення, якщо ви хочете максимально використовувати ліворуч, ви повинні використовувати:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Не тестувався на IE, тому він може виглядати зламаним на IE.

— кубілаексіоглу
джерело

1

Прийнята відповідь може спрацювати, але мені не подобається ідея перекриття поля. У HTML5 ви б це зробили display: flex;. Це чисте рішення. Просто встановіть ширину для одного елемента та flex-grow: 1;для динамічного елемента. Відредагована версія скрипки merkuros: https://jsfiddle.net/EAEKc/1499/

— Крістоф Бюлер
джерело

0

Привіт, є простий спосіб з переповненим прихованим методом на правій елемент

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }

<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>

Розгорніть фрагмент

— Санджіб Дебнат
джерело

-1

Це може спрацювати:

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

— кіртан-шах
джерело

Розгорніть div до максимальної ширини, коли float: встановлено ліворуч

Новий, кращий варіант використання display: flex;

Рішення без фіксації розміру за вашим полем

Новий, кращий варіант використання `display: flex;`