CSS列自动中断

Question

我已经在三天内尝试了自己，但无法修复它。请帮我。非常感谢。

• 红色：现在是我的代码。
• 蓝色：我想改变结果。

我只是在家里尝试从零开始学习，但我喜欢它并且不会放弃，如果可以的话请教我。谢谢。

My problem 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;
}

Answer 1

使用 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 未关闭，页脚必须在正文内，以及其他一些事情 - 请插入您的代码 here 并查看报告，它将帮助您解决所有问题错误。

2. 您的 CSS 也有些无效，由于拼写错误（例如宽度：20%px;）而没有执行多个规则 - 您可以使用 this tool 来验证您的样式表。

3. 除非您知道为什么要这样做，否则不应在 CSS 中使用 ID 选择器。 ID 选择器优先于其他类型的选择器，如果您的页面增长，the code becomes harder to maintain。

4. 我建议 reading this 更好地了解如何构建 HTML，并可能从那里逐步阅读 MDN 上的所有其他教程 - 这是学习如何构建事物的好来源。

5. 如果您想了解更多关于 flexbox 的工作原理 - here 是一份综合指南。

Answer 2

* {
  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>