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

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

1 голос
/ 11 февраля 2010

У меня есть страница, где у меня есть меню слева и справа, у меня есть новый раздел с большим количеством текста. Для начала текст располагается правильно, но как только текст опускается ниже высоты левого меню, текст располагается больше влево.

Я понимаю, что это потому, что раздел плавает (пожалуйста, поправьте меня, если я ошибаюсь) влево и расположен в соответствии с отступами и полями. Но как мне поступить, если я хочу сохранить левую вертикальную линию текста в моем правом разделе? Если я использую абсолютное позиционирование, «нижний колонтитул» (который является еще одним разделом div) перемещается вверх и перекрывает текст. Определяя высоту левого меню выше, чем текст, я получаю красивую вертикальную текстовую строку, но трудно понять, где расположить нижний колонтитул.

Пожалуйста, смотрите мой код ниже. Я пытался скопировать только то, что нужно, надеюсь, я ничего не пропустил.

Заранее спасибо!

HTML: 

<div id="container">

<div id="subsections">

<h4>Games</h4>

<ul id="subnav">
    <li><a href="games.html#theGame">The Game</a></li>
</ul>

</div><!-- END #subsections -->

<hr />

<div id="maincontent">

<h3>Welcome</h3>

<div id="welctext">

<p>Welcome to this site. Here you can find information about the applications that this company has developed. You can subscribe to information about new or updated applicaionts here.</p>

<p>This company is a small company that focus on developing application that can be used on the a mobile device. Presently the focus is on iPhone. Here you can find out what applications that are available right now. More to come...</p>

</div><!-- END #welctext -->

</div><!-- END #maincontent -->

<hr/>

<div id="footer">

<p> &copy; Some company name</p>

</div><!-- END #footer -->

</div><!-- END #container -->

</body>
</html>

CSS: 

body {
    /*background-color: #333;*/
    /*background-color: #98310d;*/
    background-color: #d7e6f1;
    background-image: url(../images/graphics/back-tile.jpg);
    color: #4b5dcb;
    font-family: "Apple Braille", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif;
    font-size: 0.9em;
    margin: 0;
    padding: 0 0 0 0px;
    /* IE auto center fix */
    text-align: left;
}

#container {
    line-height: 1.6em;
    margin: 0 auto 0 auto;
    width: 720px;
    padding: 20px 0px 0px 50px;
    text-align: justify;
    float: left;
}

#maincontent {
    margin: 0px 0px 0px  50px;
    padding: 0;
}

#subscribe {
    margin: 0px 0px 0 220px;
    padding: 0;
    text-align: left;
}

#subsections {
    float: left;
    margin-bottom: 40px;
    width: 220px;
    /*height: 1300px;*/
}

ul#subnav {
    list-style: none;
    margin: 0;
    padding: 14px 0 0 10px;
}

div#footer {
    border-top: 1px solid #FFF;
    clear: both;
    font-size: .75em;
    line-height: 1.3em;
    margin-bottom: 40px;
    padding-bottom: 10px; 

}

#welctext {
    padding: 0 0 16px 0;
}

Ответы [ 3 ]

1 голос
/ 11 февраля 2010

Ну, прошло менее одной минуты после отправки вопроса, прежде чем моя память снова подключилась, и я вспомнил, как это сделать. Margin - это поле для родительского конкатена при заполнении только предыдущего элемента. Итак, чтобы получить красивую линию, я хочу увеличить левое поле до соответствующего размера. Это работает, и я надеюсь, что я объяснил это правильно ...

0 голосов
/ 27 ноября 2014

На самом деле, если вы плаваете, вы плаваете только в той части, где плавает ваша секция. Если вы хотите «зарезервировать» эту область, вам действительно нужно иметь display: inline-block. Это ведет себя как блок div и в некоторой степени похоже на span.

Я мог бы многое изменить, но здесь я разместил jsfiddle: http://jsfiddle.net/o9vLpbe4/

Убедитесь, что ваш #maincontent.width + #subsections.width < #container.width, включая прокладки и прочее. И обнулил все это для упрощения. Поскольку он ведет себя как промежуток, он переходит на другую строку, если размеры не помещаются в строке.

Я также помещаю #subsections и #maincontent в div.

0 голосов
/ 11 февраля 2010

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

Большой ресурс на Float: http://www.westvalley.edu/common/tutorial/instruct/cssTutorial/index__1094.htm

...