Ранее я задавал вопрос о горизонтальном расположении контейнеров div, теперь у меня есть последующие и связанные вопросы:
(1) Как вы можете видеть в HTML-коде ниже, у меня естьКонтейнер «column_bottom» (для ссылок), расположенный слева от контейнера «content_bottom» (для основного содержимого страницы).Когда я набираю больше содержимого в контейнер «content_bottom», чтобы его высота превышала высоту левого контейнера «column_bottom», весь контейнер «content_bottom» сдвигается под НИЖЕ контейнер «column_bottom».Что я могу сделать, чтобы высота левого контейнера «column_bottom» динамически соответствовала высоте правого контейнера «content_bottom» (и они остаются горизонтально рядом друг с другом)?
(2) Как вы можете видеть наТаблица стилей CSS ниже, я попытался вручную установить ширину столбцов "column_top" и "column_bottom", чтобы они соответствовали в единицах em методом проб и ошибок.Будут ли какие-либо проблемы с этим методом в разных браузерах на разных системах?Что я могу сделать, чтобы ширина «column_top» и «column_bottom» всегда совпадала?
Спасибо за вашу помощь.
Вот HTML:
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>this is the site's title</title>
<link rel="stylesheet" href="penonek.css" type="text/css">
</head>
<body>
<div class="wrapper">
<div class="column_top">site<br>
</div>
<div class="content_top"> title<br>
</div>
<div class="column_bottom">
<ul>
<li>home</li>
<li><a href="#">link 1<br>
</a></li>
<li><a href="#">link 2<br>
</a></li>
<li><a href="#">link 3<br>
</a></li>
</ul>
</div>
<div class="content_bottom">main content here<br>
</div>
</div>
</body>
</html>
ВотCSS:
body {
margin: 0;
padding: 0;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
color: #cccccc;
background-color: black;
font-size: 1em;
}
.wrapper {
margin: auto;
min-width: 60em;
max-width: 60em;
font-family: Arial,Helvetica,sans-serif;
width: 60em;
color: #cccccc;
}
.column_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid black;
width: 3.2em;
min-width: 3.2em;
float: left;
padding-top: 2em;
text-align: right;
color: #333333;
max-height: 1em;
background-color: #f4f4f4;
font-size: 3em;
min-height: 1em;
max-width: 3.2em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.content_top {
border-width: 0 0 0.25em;
border-bottom: 0.25em solid #f4f4f4;
padding-top: 2em;
font-size: 3em;
min-height: 1em;
text-align: left;
max-height: 1em;
height: 1em;
font-weight: bold;
padding-bottom: 0.2em;
}
.column_bottom {
width: 9.28em;
text-align: right;
padding-top: 3em;
color: #333333;
border-bottom-width: 0;
background-color: #f4f4f4;
border-right-width: 0;
padding-right: 0.3em;
float: left;
border-left-width: 0;
min-width: 9.28em;
max-width: 9.28em;
}
.content_bottom {
padding: 3em 5em 5em;
border-collapse: separate;
text-align: left;
float: left;
}
.column_bottom ul {
margin: 0;
padding: 0;
text-decoration: none;
color: #333333;
list-style-type: none;
font-weight: inherit;
}
.column_bottom a:hover {
background-color: #999999;
}
.column_bottom a {
text-decoration: none;
font-weight: inherit;
color: #333333;
}