Вопросы Теги

Расположение отделения на два столбца, с одним взятием остатка

Учитывая следующий HTML:

<body>
<div style="float: left; background: red">Hi</div>
<div style="float: left; background: blue">Hi again</div>
</body>

Я хочу, чтобы 2-е отделение взяло остаток от ширины от страницы. Установка width, которую 100% заставят его перенести к следующей строке, и я не знаю, что еще установить для фиксации его. Левый столбец должен быть измерен согласно его содержанию, в то время как право занимает горизонтальное место напоминания.

Я знаю, что могу сделать это с таблицами, но в реальном приложении, это вызывает другие проблемы в IE6. В приложении левый столбец является деревом, в то время как остальное - основное представление. Дерево может быть свернуто. Кроме того, существуют всплывающие отделения, использующие Dojo. То, когда раскрывающееся отделение, показало и переместилось, правый столбец (в табличной форме) расширяется для наложения левого столбца в IE6. Да, это - ошибка в IE, таким образом, я пытаюсь найти, что альтернативное расположение устраняет эту проблему. Это работает с отделениями, но теперь основное представление не расширяется для заполнения экрана в других браузерах.

Вот лучшая поврежденная версия. Я должен зафиксировать его так, чтобы таблица не расширила страницу width и добавила горизонтальную прокрутку для этого:

<div style="float: left; background: red; padding: 5px; margin: 5px;">Hi</div>
<div style="background: blue">
<table width="100%"><tr><td bgcolor="green">
Hi again
</td></tr></table>
</div>
5
задан Staale 28 December 2009 в 14:10
поделиться

4 ответа

Похоже, вам нужна таблица. Думаю, вам стоит попытаться решить свои проблемы с помощью ie6 и таблиц.

.
0
ответ дан 14 December 2019 в 19:15
поделиться

Попробуйте это:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
* {
    margin:0;
    padding:0
}
html, body {
    height:100%
}
#left {
    background:red;
    float:left;
    height:100%;
    overflow:hidden
}
#right {
    background:blue;
    height:100%
}
</style>
</head>
<body>
<div id="left">
    <p><img src="http://www.google.be/intl/en_com/images/logo_plain.png" alt="Google" /></p>
</div>
<div id="right"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras suscipit massa vel nisi suscipit tincidunt. Proin tortor massa, pellentesque eget pharetra et, rutrum eu purus. Pellentesque iaculis justo a erat ultricies sodales. Nunc eu justo felis. Nullam fermentum erat sed ligula interdum consectetur imperdiet odio sagittis. Mauris sodales magna ornare dui imperdiet pretium. Donec augue erat, suscipit at aliquet vel, sodales id lorem. Aenean id fermentum est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Proin hendrerit ligula a neque placerat condimentum at ornare odio. Etiam metus augue, fringilla malesuada vestibulum eget, gravida sed mauris. Pellentesque non orci eget libero placerat vehicula. Vivamus iaculis bibendum risus, ac venenatis tellus consequat convallis. Nam tristique eros quis odio commodo venenatis. Suspendisse volutpat euismod mi eu facilisis. Quisque malesuada libero quis est suscipit et cursus augue rhoncus. Pellentesque molestie convallis nibh at pretium.</p></div>
</body>
</html>

Существует лишь небольшой разрыв между div в IE6.

.
0
ответ дан 14 December 2019 в 19:15
поделиться

Это звучит точно так, как будто проблемный флексбокс может быть исправлен. Ниже я использую стандартный синтаксис flexbox, но некоторые старые браузеры могут требовать префиксов для корректной работы.

<div class="columns">
  <div class="column">
    <p>Hello, World.</p>
  </div>
  <div class="column">
    <p>Content Area</p>
  </div>
</div>

.columns { 
    display: flex; 
}
.column:nth-of-type(2) { 
    flex: 1;
}

Это дает вам результаты, которые вы ищете: один столбец, который растет вместе с его содержимым, и другой, который просто занимает оставшееся место. Одно из предложений здесь состоит в том, чтобы применить значение минимальной ширины к согнутому столбцу, чтобы он не стал слишком маленьким.

Демонстрация: http://codepen.io/anon/pen/LglvH

3
ответ дан 14 December 2019 в 19:15
поделиться

Попробуйте так:

<body>
<div style="float: left; background: red; width: 200px; ">Hi</div>
<div style="background: blue; margin-left: 210px; ">Hi again</div>
</body>

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

1
ответ дан 14 December 2019 в 19:15
поделиться