Как мне сделать плавающий элемент div динамически расширяемым, чтобы он занимал максимум места? - PullRequest
Новая
       0

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

5 голосов
/ 30 мая 2011

У меня есть 3 всплывающих левых объекта, один слева будет постоянно менять размер. Право на всегда будет фиксированным по размеру. В центре я хочу заполнить пространство между двумя внешними элементами. Сейчас это не работает, хотя. Если я установлю ширину центра div на 100%, он станет слишком большим.

Не уверен, как это должно быть обработано.

редактировать: пример кода 

<div style="width:1000px">
  <div style="float:left;">1</div>
  <div style="float:left;">Lots of text in here that can be any size....</div>
  <div style="float:left; width:100px;">Date/Time</div>
</div>

Первый div динамический по размеру. Если число равно 10, оно займет больше места, чем число 1. Второй div также будет динамическим, я хочу, чтобы он занимал все пространство, не занятое первым и третьим div.

Ответы [ 3 ]

2 голосов
/ 30 мая 2011

HTML 

<div style="width:1000px">
  <div id="left">1</div>
  <div id="right">Date/Time</div>
  <div id="center">Lots of text in here that can be any size....</div>
</div>

CSS 

#left {
    float: left;   
    width: 20%;
}

#center {
    margin-left: 20%;
    margin-right: 100px;
}

#right {
    float: right;
    width: 100px;   
}

См. скрипка .

1 голос
/ 30 мая 2011

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>How do I make a floating div dynamically expand to take up maximum space?</title>
    <style type="text/css">
    #left {
        float:left;
        border:1px solid red;
    }
    #right {
        float:right;
        border:1px solid green;
        width:100px;
    }
    #center {
        overflow-x:hidden;
        border:1px solid blue;
    }
    </style>
</head>
<body>

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1>

    <div id="left">
    Un-fixed width left, whose content may change.
    </div>
    <div id="right">
    Fixed WIdth Right column which shouldn't expand.
    </div>
    <div id="center">
    The center content<br />Which should expand as necessary
    </div>

</body>
</html>
0 голосов
/ 23 апреля 2015

Вы, наверное, узнали это давно, но для следующего парня вы можете сделать это сейчас с помощью CSS3 flexbox. ( Новейшая спецификация W3c , Документация Mozilla , css-tricks )

HTML 

<div class="flex-container">
    <div>1</div>
    <div class="expandable">Lots of text in here</div>
    <div style="float:left; width:100px;">Date/Time</div>
</div>

CSS 

.flex-container {
    display: flex;
    width: 1000px;
    border: 1px solid black;
}   
.expandable {
    flex: 100 100;
    text-align: center;
}

Вот это jsfiddle .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...