Я действительно натолкнулся на эту стену и нуждаюсь в некоторой помощи. Я пытаюсь создать раскладку из двух столбцов с шириной и высотой, скорректированной на содержимое левого столбца. Кажется, это довольно простой макет, но я начинаю думать, что это невозможно сделать (не прибегая к JS).
Эта скрипка описывает то, что я пытаюсь сделать. Это контейнер DIV с двумя DIV внутри, выровненный по горизонтали. Левый внутренний DIV должен регулировать свой размер (как ширину, так и высоту) до его содержимого. Правильный внутренний DIV (который содержит карту Google) должен иметь ту же высоту, что и левая, при заполнении оставшейся ширины контейнера.
<div id="container">
<div id="left">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div id="right">
Google Map here.
</div>
</div>
Я пробовал все, что знаю, и все трюки, которые я нашел, но не успел!
#container {
background-color: #EEE;
overflow: hidden;
}
#container div {
border: 1px solid black;
padding: 5px;
}
#left {
background-color: lightblue;
display: inline-block;
float: left;
}
#right {
background-color: lightgreen;
height: 100%; /* THIS IS WHAT I WANT, BUT IT WON'T WORK, OF COURSE */
overflow: hidden;
}
Я нашел много похожих вопросов, но во всех этих случаях левый столбец DIV/имел фиксированную ширину, что делает его намного проще.
Любой вход очень ценится, особенно если он работает в IE9+ (и современных браузерах)!
редактировать
Некоторые разъяснения. Цель правой колонки - удерживать карту Google, и, следовательно, карта должна заполнить весь DIV. Попробуйте установить фиксированную высоту (например, 100px) для #right в скрипке, с которой я ссылаюсь выше, и вы увидите, что карта отображается.
Вот что я придумал → ссылка
Когда вы удаляете свойство overflow
вашего #right div
оно растягивается, как ожидалось. Однако в этом случае вы не сможете скрыть переполненный контент.
CSS
#right {
background-color: lightgreen;
height: 100%; /* THIS WON'T WORK */ // height works as expected
}
css:
.container {
overflow: hidden;
background-color: #EEE;
}
.column {
float: left;
background-color: grey;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
p {
padding: 10px;
margin-top: 10px;
width: 50%;
}
HTML
<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
<div class="container">
<div class="column">
This DIV should adjust<br/>
both its width and height<br/>
to its content, not taking up<br/>
more space than needed!<br/>
<br/><br/><br/>
More content here...
</div>
<div class="column">
<div id="map"></div>
</div>
</div>
<p>
The right DIV (which contains a Google Map)
should be the same height as the left DIV,
while filling up the remaining width.
</p>
<p>How to do that?</p>