Тег Div на той же высоте

Question

Тег Div на той же высоте

0

У меня есть 3 divs, которые я хочу, чтобы они отображались на одинаковой высоте слева и справа от центра, но это не происходит прямо сейчас.

Доказательство концепции: https://dl.dropboxusercontent.com/u/51736887/Untitled.png (должно быть 10 rep для отправки изображений)

Проблема в том, что боковые панели и основной контент являются одними из ниже других и приклеены в сторону не только под навигационной панелью, как я их хочу. Изображение происходящего: https://dl.dropboxusercontent.com/u/51736887/Untitled%20-%20Copy.png

Это мой текущий код (включает только 1 из двух боковых панелей):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="stylesheets/public.css" media="all" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
</head>
<body>
    <h3 align="center"><img src="afterlogo.png" alt="" height="358" width="339"></h3>

<div id="nav">
<ul>
    <li><a href="#">Home</a></li>
    <li><a href="/public/forums/">Forums</a></li>
    <li><a href="/public/donate.php">Donations</a></li>
    <li><a href="/vote">Vote</a></li>
</ul>
</div>
<div class="content">
<p><b> test </b> 0000-00-00 00:00:00<br><b> test 2 </b> 0000-00-00 00:00:00<br>test3     0000-00-00 00:00:00<br>test4 0000-00-00 00:00:00<br>test <br />test <br />test <br />test     <br />test <br />test <br />test <br />test <br />test <br />test <br />    </p>
</div>
<div class="sidebar"> test </div>

<div class="footer">
&nbsp;
<br />
Test footer
<br />
&nbsp;
</div>
</html>

и heres css:

body {
background-image:url('../bg.png');
background-attachment: fixed;
background-position: bottom;
}

#nav a:link{
text-decoration: none;
color: #000000;
font-size: 2em;
}
#nav a:visited {
color:#000000;
}

#nav a:hover {
color: #00FF00;
}

#nav {
border-radius: 15px;
background-size: cover;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
word-spacing: 2em;
}

.nav {
text-decoration: none;
}

li {
display: inline;
}

.content {
border-radius: 15px;
background-size: cover;
/*background-image:url('../content.png');*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin-left: auto ;
margin-right: auto ;
width: 500px;
background-repeat: no-repeat;
}

.sidebar {
border-radius: 15px;
/*background-size: cover;*/
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: left;
overflow: hidden;
margin-left: 120px;
margin-right: auto;
width: 220px;
float: left;
}

.footer {
clear:both;
border-radius: 500px;
text-align: center;
background: rgba(76, 92, 70, 0.7);
background-position: top;
text-align: center;
overflow: hidden;
position: relative;
margin:6em;
background-repeat: no-repeat;
}

Nick 09 нояб. 2013, в 15:18

Источник

0

Вы можете получить дополнительную помощь, если разместите весь соответствующий сгенерированный HTML-код.
SombreErmine 09 нояб. 2013, в 14:01
0

@SombreErmine ok добавил весь HTML-код ^
Nick 09 нояб. 2013, в 14:26

Теги:

html

css

1 ответ

Ещё вопросы

Вы можете получить дополнительную помощь, если разместите весь соответствующий сгенерированный HTML-код.

Terry · Answer 1 · 2013-11-09T13-18-00.000Z

Я считаю, что вы хотите добиться одинаковых высот колонн - здесь отличный отчет Криса Койера, подробно описывающий различные методы, которые вы можете использовать.

p/s: Было бы хорошо, если бы вы могли включить фактический вывод HTML окончательного макета (не в отдельные файлы PHP);)

Изменить: взглянув на ваш код, кажется, что вы полностью позиционируете боковую панель. Есть ли причина, почему вы так поступаете? Вы могли бы легко перемещать боковую панель и содержимое, поэтому они будут сидеть бок о бок.

Обновление. Прежде всего, вам следует избегать использования устаревших функций HTML, таких как свойство align="center". Вы должны делегировать все атрибуты, которые диктуют макет для вашего CSS файла.

Вы не можете комбинировать как float и position: absolute на одном и том же элементе. Они являются противоречивыми свойствами, и оба из них вытеснят ваш элемент из нормального потока документов. Я бы предположил, что это содержимое вашего содержимого и боковой панели в общем родительском элементе, например <main>, <section> или <div>, и их плавающие.

Здесь пересмотренная разметка:

<section class="main">
    <div class="content">
        <p>Content</p>
    </div>
    <div class="sidebar">test</div>
</section>

И CSS:

.main {
    margin: 0 6em;
    /* or you can set width using "width: ..." */
    overflow: hidden; /* Prevent parent from collapsing */
}
.content, .sidebar {
    background-color: rgba(76, 92, 70, 0.7);
    border-radius: 15px;
    float: left;
}
    .content {

    }
    .sidebar {
        width: 250px;
    }

http://jsfiddle.net/2X7pv/

Нет на самом деле это не проблема, проблема заключается в следующем: dl.dropboxusercontent.com/u/51736887/Untitled%20-%20Copy.png
@Nick Опять же, очень трудно увидеть ваш окончательный вывод HTML только по предоставленным вами файлам. Не могли бы вы оказать нам большую услугу и объединить их?
Я объединил код в 1 кодовый тег, и без какой-либо конкретной причины, по которой позиция была оставлена там, я проводил различные тесты, чтобы увидеть, будет ли он лучше позиционироваться. РЕДАКТИРОВАТЬ Я обновил код CSS