Влево и вправо Divs в CSS

Question

Мне нужен левый квадрат div и правый квадрат. Правый div shoulld будет иметь ширину 300 пикселей и показывать рядом с левым div.

Я ужасно с CSS, и, несмотря на попытки решения из 5 других проблем с переполнением стека, я все равно не могу это понять.

Я пробовал дисплей: inline; Я попробовал таблицы/таблицы. Я пробовал исправление и auto margin Я пробовал набивку. Я искал последний час и продолжал возиться.

Я по-настоящему нахожусь на своем дурацком языке и нуждаюсь в помощи.

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

Мой style.css:

#left { 
    float: left; 
    margin-right: 400px; 
} 
#right { 
    float: right; 
    width: 298px; 
} 

Мой HTML-файл:

<div id="right"> 
    Latest News 
</div> 
<div id="left"> 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
</div> 

Answer 1

Вы можете просто сохранить элемент блока #left в виде обычного притока, а не плавать.

Правильный запас предоставит пространство для новостной ленты с правом роста по мере необходимости.

#left { 
 
    margin-right: 320px; 
 
    border: 1px dotted gray; 
 
} 
 
#right { 
 
    float: right; 
 
    width: 298px; 
 
    border: 1px dotted gray; 
 
}

<div id="right"> 
 
    <h2>Latest News - Your news feed.</h2> 
 
    <ul> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    <li>News topic ...</li> 
 
    </ul> 
 
</div> 
 
<div id="left"> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
 
</div>

Answer 2

HTML делители использовать display: inline-block; не display: inline;.

HTML

<div id="right"> 
    Latest News 
</div> 
<div id="left"> 
    <p>My problem comes when this p tag gets too long. everything is ok when they are short, but regardless of wrapping, the look gets screwed the second this is too long and it is driving me bonkers.</p> 
</div> 

CSS

#left { 
    display: inline-block; 
    margin-right: 400px; 
} 
#right { 
    display: inline-block; 
    float: right; 
    width: 298px; 
} 

Там нет необходимости для float: left;. Разделители, естественно, находятся слева от страницы.