два раздела одинаковой строки, один динамической ширины, один фиксированный

ProgramBox

два раздела одинаковой строки, один динамической ширины, один фиксированный

Post author:admin
Запись опубликована:26 апреля, 2023
Post category:Вопросы по программированию

#css #html

#css #HTML

Вопрос:

У меня есть два раздела под одним родительским div , родительский раздел имеет ширину 100%:

 <div id="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

Условия таковы:

Я хочу два раздела в одной строке.
Правильный div может присутствовать, а может и не присутствовать. Когда это присутствует, я хочу, чтобы оно всегда было исправлено справа. Однако левый раздел должен быть эластичным — его ширина зависит от его содержимого.

Я пробовал как float: left, так и dispaly:inline-block, но ни одно из решений, похоже, не работает.

Любое предложение будет оценено.

Ответ №1:

Я бы согласился с display: table-cell ответом @sandeep’s, если вас не волнует IE7.

В противном случае, вот альтернатива, с одним недостатком: «правильное» div должно быть первым в HTML.

Смотрите: http://jsfiddle.net/thirtydot/qLTMf /
и точно такой же, но с удаленным «правильным разделением»: http://jsfiddle.net/thirtydot/qLTMf/1 /

 #parent {
    overflow: hidden;
    border: 1px solid red
}
.right {
    float: right;
    width: 100px;
    height: 100px;
    background: #888;
}
.left {
    overflow: hidden;
    height: 100px;
    background: #ccc
}
<div id="parent">
    <div class="right">right</div>
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam semper porta sem, at ultrices ante interdum at. Donec condimentum euismod consequat. Ut viverra lorem pretium nisi malesuada a vehicula urna aliquet. Proin at ante nec neque commodo bibendum. Cras bibendum egestas lacus, nec ullamcorper augue varius eget.</div>
</div>

1. я знаю этот трюк, и это здорово htmldog.com также реализован на его собственном веб-сайте, но я хочу сделать это в соответствии с заданной разметкой @Yijie

2. @sandeep: Да, я согласен. Я бы опубликовал ответ, основанный на display: table-cell себе, если бы вы этого еще не сделали.

3. @thriydot; ты тоже заслуживаешь 1

4. Это решение работает хорошо, но мне не нравится тот факт, что левый и правый разделы имеют фиксированную высоту. Как бы выглядел код, если бы вы хотели, чтобы разделы были одинаковой (но динамической) высоты с динамическим содержимым в любом из них?

Ответ №2:

@Yijie; Проверьте ссылку, может быть, это вам нужноhttp://jsfiddle.net/sandeep/NCkL4/7 /

Редактировать:

http://jsfiddle.net/sandeep/NCkL4/8/

Или ПОСМОТРИТЕ СЛЕДУЮЩИЙ ФРАГМЕНТ

 #parent{
    overflow:hidden;
    background:yellow;
    position:relative;
    display:table;
}
.left{
    display:table-cell;
}
.right{
    background:red;
    width:50px;
    height:100%;
    display:table-cell;
}
body{
    margin:0;
    padding:0;
}

 <div id="parent">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="right">fixed</div>
</div>

1. Это не то, чего хотел постер. Если вы удалите правый раздел, останется пустое пространство, потому что вы использовали отступы, чтобы сохранить дистанцию между содержимым.

2. @darthJDG amp; Yijie Li проверьте мой новый jsfiddle, может быть, это то, что вы хотите

3. display: table-cell это хороший способ добиться желаемого эффекта здесь, но вы должны знать, что это не будет работать в IE7. Этот факт может иметь значение, а может и не иметь.

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

5. Да, пожалуйста, всегда добавляйте копию кода в ответ, на случай разрыва ссылки или удаления jsfiddle и т.д.

Ответ №3:

HTML:

 <div id="parent">
  <div class="right"></div>
  <div class="left"></div>
</div>

(div.right должно быть перед div.left в HTML-разметке)

CSS:

 .right {
float:right;
width:200px;
}

Ответ №4:

Таким образом, стиль левого div зависит от наличия правого div. Я пока не могу придумать CSS-селектор, допускающий такое поведение.

Таким образом, мне кажется, что для этого вам нужно программно добавить класс на стороне сервера (или в JS) в родительский div или левый div.

 <div id="parent twocols">
  <div class="left"></div>
  <div class="right"></div>
</div>

или

 <div id="parent">
  <div class="left"></div>
</div>

Таким образом, правильный стиль всегда :

 .right {
    float: right;
    width: 200px; /* or whatever value you need */
    /* margin and padding at your discretion */
}

и левый стиль — это :

 .parent.twocols .left {
    margin-right: 200px; /* according to right div width   margin   padding*/
}

1. при использовании .left{margin-right:200px}, если правый раздел отсутствует. это оставит пустое пространство. не так ли?

2. Я не использую, .left{margin-right:200px} но .parent.twocols .left{margin-right:200px} это поле включается только при наличии правого столбца, как указано в .twocols дополнительном классе

Ответ №5:

Я добился успеха с использованием пробела: nowrap; во внешнем контейнере, display: inline-block; во внутренних контейнерах, а затем (в моем случае, поскольку я хотел, чтобы второй был перенесен в word) пробела: normal; во внутренних.

Ответ №6:

Я думаю, это то, что вы хотите:

 <html>
<head>
<style type="text/css">
#parent 
{width:100%;
height:100%;
border:1px solid red;
}
.left
{
float:left;
width:40%;
height:auto;
border:1px solid black;
}
.right
{
    float:left;

width:59%;
height:auto;
border:1px solid black;
}
</style>
</head>
<body>
<div id="parent">
  <div class="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
  <div class="right">This is the right side content</div>
</div>
</body>
</html>

Вот демонстрация:http://jsfiddle.net/anish/aFBmN /

1. Это не то, чего хотел постер. Правая сторона не имеет фиксированного размера, и если вы удалите правый раздел, останется пустое пространство.

2. спасибо, но та же проблема для 3 ответов,,, когда вы удаляете правый div,, это оставляет пустое пространство …. Я думаю, что вместо этого я буду использовать script…