css колонки авто брейк - PullRequest
Новая
       18

css колонки авто брейк

0 голосов
/ 15 мая 2018

Я попробую себя через три дня и не могу это исправить.Пожалуйста, помогите мне.Большое спасибо.

  • Красный: мой код сейчас.
  • Синий: результат, который я хочу изменить.

Я просто пытаюсь научитьсяс нуля дома, но я люблю это и не сдамся, пожалуйста, научите меня, если можете.Спасибо.

Моя проблема img

Итак, вот мой код. 

#container {
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
}

#sidebar-left, #sidebar-right {
    width: 20%px;
    float: left;
    margin-right: auto;
    margin-left: auto;
}

#navbar-center {
    width: 56%;
    height: 40px; 
    float: left;
    margin-left: 40px;
    display: block;
}

#sidebar-left ul,  #sidebar-right ul, #navbar-center ul {
    list-style-type: none;
    text-align: auto;
}

#sidebar-left li, #sidebar-right li, #navbar-center li {
    display: block;
    color: #666;
    width: 100px;
    height: 40px;
    line-height: 40px;
}

#sidebar-left a:hover, #sidebar-right a:hover, #navbar-center a:hover {
    color: #FFF;
    background-color: #666;
}

.wrap-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 25px;
    overflow: hidden;
    height: 24px;
    padding-bottom: 4px;
    border-bottom: 2px solid #666;
}

Ответы [ 2 ]

0 голосов
/ 15 мая 2018 

* {
  margin: 0;
  padding: 0;
  margin: none;
  box-sizing: border-box;
}
body {
	font-family: roboto;
  	color: #333;
  	background: transparent url(https://i.imgur.com/78YXS1N.) no-repeat;
  	background-size: cover;
  	padding: 40px 10%;
}

a {
	text-decoration: none;

}


#menu-navbar, #menu-header {
	height: 40px;
	background-color: transparent;
	margin: 5px 0px;
}


#menu-navbar ul {
	list-style-type: none;
	text-align: right;
}

#menu-navbar li {
	display: inline-block;
	color: #666;
	width: 100px;
	height: 40px;
	line-height: 40px;
}

#menu-navbar a, #sidebar-left a, #sidebar-right a, #navbar-center a {
	display: block;
	text-align: center;
}

#menu-navbar a:hover {
	color: #FFF;
	background-color: #666;
}

#container {
	width: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
}

#sidebar-left, #sidebar-right {
	width: 20%px;
	float: left;
	margin-right: auto;
	margin-left: auto;
}

.center {
	width: 56%;
	line-height: 40px;
	float: left; 
	display: inline-flex;
	flex-wrap: wrap;

}

.wrap-title {
	font-size: 18px;
	flex-basis: 20%;
	text-align: center;

}



#sidebar-left ul,  #sidebar-right ul, .wrap-title {
	list-style-type: none;
	text-align: auto;
}

#sidebar-left li, #sidebar-right li, .wrap-title {
	display: block;
	color: #666;
	width: 100px;
	height: 40px;
	line-height: 40px;
}

#sidebar-left a:hover, #sidebar-right a:hover, .center a:hover {
	color: #FFF;
	background-color: #666;
}





#footer {
	clear: both;
}
<!DOCTYPE html>

<html lang="vi">
	<head>
		<meta charset="utf-8" />
		<title>Thư Giới</title>
		<meta name="author" content="ThuGioi" />
		<meta name="description" content="Doc truyen hay online hoan toan mien phi day du the loai cap nhat lien tuc" />
		<meta name="keywords" content="doc truyen, doc truyen hay, truyen hay online, thu gioi, the gioi truyen" />
		<meta name="generator" content="Thu Gioi" />
		<link rel="stylesheet" type="text/css" href="style.css" />
		<link rel="stylesheet" type="text/css" href="normalize.css" />
		<meta name="viewport" content="width=device-width, initial-scale=1">

	</head>	

	<body>

		<header>
			<div id="navbar">
				<div id="logo">
					<img src="https://i.imgur.com/IJqFHP5.pn" title="banner" alt="Test Page" />
				</div>	

				<div id="menu-navbar">
					<ul>
						<li><a href="#">Tìm Kiếm</a></li>
						<li><a href="#">Tài Khoản</a></li>
						<li><a href="#">FanPage</a></li>
						<li><a href="#">Diễn Đàn</a></li>		
					</ul>	
				</div>

				<div id="container">

				<div id="sidebar-left">
					<ul>
						<h3>Tin Tức</h3>
						<li><a href="#">Tin Tức 1</a></li>
						<li><a href="#">Tin Tức 2</a></li>
						<li><a href="#">Tin Tức 3</a></li>
						<li><a href="#">Tin Tức 4</a></li>
						<li><a href="#">Tin Tức 5</a></li>
						<li><a href="#">Tin Tức 6</a></li>
					</ul>
				</div>

				<div class="center">
						<h3>Thể Loại</h3>
						<div class="wrap-title"><a href="#">Thể Loại 1</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 2</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 3</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 4</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 5</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 6</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 7</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 8</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 9</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 10</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 11</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 12</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 13</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 14</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 15</a></div>
						<div class="wrap-title"><a href="#">Thể Loại 16</a></div>	
				</div>	

				<div id="sidebar-right">
					<ul>
						<h3>Danh Mục</h3>
						<li><a href="#">Danh Mục 1</a></li>
						<li><a href="#">Danh Mục 2</a></li>
						<li><a href="#">Danh Mục 3</a></li>
						<li><a href="#">Danh Mục 4</a></li>
						<li><a href="#">Danh Mục 5</a></li>
						<li><a href="#">Danh Mục 6</a></li>
					</ul>	

				</div>

				<div id="content">

					<div class="left-content">


					</div>	


				</div>	


			</div>	

			<div id="footer">
				
			</div>			



		</header>	
	</body>

	<footer>

	</footer>

</html>
0 голосов
/ 15 мая 2018

С помощью flexbox все получится - просто установите для родителей значение display-flex и flex-wrap: wrap, а для детей - flex-basis: 20%.

Согласно вашему скриншоту, я понимаю, что вы пытаетесь создать макет из 3 столбцов (левая боковая панель, центральная и правая боковая панель), а сам центральный блок должен содержать 12 элементов, выровненных по 5 столбцам. Ниже приведен ваш модифицированный код, демонстрирующий, как добиться такого согласования с техникой Flexbox, о которой я упоминал ранее. 

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
ul {
	list-style: none;
}
.container {
	display: flex;
	text-align: center;
}
.sidebar-left,
.sidebar-right {
	flex-basis: 15%;
	background-color: #D0FBE1;
}
.center {
	flex-basis: 70%;
	background-color: #C4F9FF;
}
.content-center {
	display: flex;
	flex-wrap: wrap;
}
.wrap-title {
	flex-basis: 20%;
}
<div class="container">

	<div class="sidebar-left">
		<h3>Tin Tức</h3>
		<ul>
			<li><a href="#">Tin Tức 1</a></li>
			<li><a href="#">Tin Tức 2</a></li>
			<li><a href="#">Tin Tức 3</a></li>
			<li><a href="#">Tin Tức 4</a></li>
			<li><a href="#">Tin Tức 5</a></li>
			<li><a href="#">Tin Tức 6</a></li>
		</ul>
	</div>

	<div class="center">
		<h3>Thể Loại</h3>
		<div class="content-center">
			<div class="wrap-title"><a href="#">Thể Loại 1</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 2</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 3</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 4</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 5</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 6</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 7</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 8</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 9</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 10</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 11</a></div>
			<div class="wrap-title"><a href="#">Thể Loại 12</a></div>
		</div>	
	</div>	

	<div class="sidebar-right">
		<h3>Danh Mục</h3>
		<ul>
			<li><a href="#">Danh Mục 1</a></li>
			<li><a href="#">Danh Mục 2</a></li>
			<li><a href="#">Danh Mục 3</a></li>
			<li><a href="#">Danh Mục 4</a></li>
			<li><a href="#">Danh Mục 5</a></li>
			<li><a href="#">Danh Mục 6</a></li>
		</ul>	
	</div>
</div>

Что касается вашего кода, я бы порекомендовал следующее:

  1. Ваш HTML-код недействителен: #navbar не закрыт, нижний колонтитул должен быть внутри тела, и пара других вещей - пожалуйста, введите свой код здесь и посмотрите отчет, он будет поможет вам исправить все ошибки.

  2. Ваш CSS также несколько недопустим, несколько правил не выполняются из-за опечаток (например, ширина: 20% px;) - вы можете использовать этот инструмент для проверки вашей таблицы стилей.

  3. Вы не должны использовать селектор идентификаторов в CSS, если не знаете, почему вы это делаете. Селекторы идентификаторов имеют приоритет над селекторами других типов, если ваша страница растет, код становится все труднее поддерживать .

  4. Я бы предложил прочитать это для лучшего понимания того, как структурировать ваш HTML, и, возможно, шаг за шагом пройтись по всем другим учебникам по MDN - это отличный источник, чтобы научиться строить вещи.

  5. И если вы хотите узнать больше о том, как работает flexbox - здесь - это исчерпывающее руководство.

...