CSS div расширяется горизонтально, а не вертикально

Я пытаюсь разместить содержимое в div и сделать его горизонтальным, а не вертикальным. Я искал методы на Stackoverflow и Google, но по какой-то причине никто из них не работает. . Group-container - контейнер, а группа div располагается с контейнером.CSS div расширяется горизонтально, а не вертикально

Моя страница HTML

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <title>Website Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
    <script src="scroll.js"></script> 
</head> 

<body> 

<!-- HEADER BEGIN --> 
<div class="header"> 


<img src="logo2.png" class="logo" alt="" /> 

<div class="right-menu-holder"> 


<a href="" class="menu-links">LOGIN</a> 
&nbsp; 
<input type="button" class="searchbtn" value="SEARCH" /> 

<div class="right-side-container"> 
<input type="text" class="search-field" /> 
</div> 

<div class="clear"></div> 

</div> 
<div class="clear"></div> 

</div> 
<!-- HEADER END --> 
    <img src="left_arrow.png" id="arrowL" /> 
    <img src="right_arrow.png" id="arrowR" /> 
    <div class="clear"></div> 

<!-- GROUP CONTAINER AND INNER BEGINS--> 
<div class="group-container"> 

<div class="group" id="group"> 
<font class="trending">Trending 1</font> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
</div> 



<div class="group" id="group"> 
<font class="trending">Trending 2</font> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
</div> 



<div class="group" id="group"> 
<font class="trending">Trending 3</font> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
</div> 



<div class="group" id="group"> 
<font class="trending">Trending 4</font> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
<img src="http://img.youtube.com/vi/RWfjeQJlNSc/mqdefault.jpg" class="thumb" /> 
<br /> 
</div> 


<div class="clear"></div> 





</div> 
<!-- GROUP CONTAINER AND INNER END --> 



<!-- FOOTER BEGIN --> 
<div class="footer"> &copy; 2015 Website</div> 
<!-- FOOTER END --> 
</body> 
</html>

И CSS для двух DIV

.group-container{ 
    width:1296px; 
    height:83%; 
    margin-left:2.5%; 
    margin-top:20px; 
    overflow-x:auto; 
    white-space:nowrap; 
    position:relative 
} 

#group{ 
    white-space:normal; 
    display:inline-block; 
    float:left; 
    width:1296px; 
}

источник

2015-09-29 Jonattan Davelaar

Помимо Рассмотрим использование правильных HTML семантику (заголовок должен быть ''

, нав меню в ''

, содержимое колонтитула в ''

1296px * минимальная * ширина, необходимая для DIV? Если это так, вы можете просто изменить 'width: 1296px;' в '.group-container' на' min-width: 1296px; 'и удалить настройки ширины и отображения в' # group'. На самом деле, я подозреваю, что вы можете вообще избавиться от класса '# group' в этом случае. – Eraph

Я думаю, что есть много, чтобы рассмотреть здесь, это зависит от того, что ваш собираетесь. Вообще говоря, если вы хотите, чтобы ваш <img> s был горизонтальным, вам нужно сделать высоту .group-container менее двух строк. Так что если ваши <img> s - 180px высокий, установите .group-container как минимум 180px.

.group-container { 
    height:200px; 
}

При запуске добавления дополнительных изображений вы столкнетесь с другой проблемой. Как только изображения будут занимать больше ширины, чем 1296px, они начнут накапливаться в строках. Вам нужно будет больше устанавливать .group-container. (Не говоря уже о том, что на данном этапе он не поместится на каком-либо экране).

Хорошее обходное решение, на которое вы можете обратить внимание, устанавливает CSS на ваших изображениях float:left; и устанавливает фиксированную высоту на .group-container. Если вы хотите, чтобы приложить длинную полосу изображений в то, что соответствует на экране, поместите .group-container в другой div элемент и дать ему width и height, а также overflow-x: auto;

.group-container { 
    height:200px; 
} 
.group-container img { 
    float:left; 
} 
.group-container-parent { 
    width:100%; 
    overflow-y:auto; 
}

и ваш HTML-код было бы что-то вроде

<div class="group-container-parent"> 
    <div class="group-container"> 
     <img ... /> 
     <img ... /> 
     ... 
    </div> 
</div>

и как @ trashr0x отметил, хорошая семантика действительно поможет, а также избежать <font> тега и используя интервал CSS для вашей линии ломает

источник

2015-09-29 03:47:41 brovalex

Я думаю, эта ссылка может вам помочь.

Expand container div with content width

источник

2015-09-29 04:56:32 Batman

CSS div расширяется горизонтально, а не вертикально

ответ

Смежные вопросы