css列自动休息

时间：2018-05-15 01:38:57

标签： html css multiple-columns

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

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

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

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

2 个答案:

答案 0 :(得分：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是一份全面的指南。

答案 1 :(得分：0)

＆＃13;
＆＃13; 
* {
  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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题