html - 响应式设计 - 列不在 Div 标签内

标签 html css responsive-design media-queries multiple-columns

我正在创建一个通用的响应式网页，其中三列应该包含在一个 div 标记中。不幸的是，这就是页面现在的样子:enter image description here

如您所见，三列(内容 1、内容 2 和内容 3)应包含在红色的“3 列布局”部分中，如下所示:

enter image description here

第二张图片来 self 正在处理的一个类元素，但是当我尝试复制并粘贴代码时，一切都变得很糟糕。我将为您提供这两个页面的代码。

这是我的第一张图片(我正在尝试修复的图片)的代码:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Resposnive Layouts</title>
<link href="layout1.css" type="text/css" rel="stylesheet">
</head>

<body>
<div id="container"><!--opens container-->

<header>
<h2>Header</h2>
</header>

<nav id="skipTo">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
</ul>
</nav>

<div class="banner">
</div><!--closes banner-->

<article>
<h2>Article</h2>
</article>

<aside>
<h2>Aside</h2>
</aside>

<div class="clearfix">
</div>

<!-- 3 column layout -->

<div class="content">
<h2>3 Column Layout</h2>

<div class="leftcol"> <h4>Content 1</h4>
</div><!--closes leftcol-->

<div class="rightcol"> <h4>Content 3</h4>
</div><!--closes rightcol-->

<div class="midcol"> <h4>Content 2</h4>
</div><!--closes midcol-->

</div>

<footer>
<h2>Footer</h2>
</footer>

</div><!--closes container-->
</body>
</html>

CSS:

html{overflow:scroll}/*for tablets and phones*/

/*global styles*/
#container {height:10em;
            margin:auto;
            max-width:1000px;
            width:100%}

header {width:100%;
       height:25px;
       background-color:red;
       margin-bottom:15px;}

nav ul{list-style-type: none;
      margin: 0;
      padding: 0;
      text-decoration:none;
      text-align:center;
      margin-bottom:15px;}

nav ul li{display:inline;
       margin-left:15px;}

h2 {text-align:center;}

h4 {display: block;}

article{width:45%;
    margin-right:5%;
    float:left;
    height:500px;
    background-color:green;}

aside{width:45%;
      float:right;
      height:500px;
      background-color:green;}

.clearfix{clear:both;}


footer {width:100%;
       height:25px;
       background-color:red;
       margin-bottom:15px;
       clear:both;}

.content{width:auto;
         height:auto;
         clear:both;
         background-color:red;}   

.leftcol{margin:2% 0 0 1%;
         width:30%;
         float:left;}

.midcol{width:30%;
        margin-left:35%;}

.rightcol{width:30%;
          float:right;}


/*media query for phone*/
@media screen and (max-width:480px) {
#skipTo{display:block;}

header nav, #main, aside, article{
float:left;
clear:left;
width:100%;
margin:0 0 1% 1%;}

header nav ul li{margin:0;
       background-color:#efefef;
       display:block;
       margin-bottom:3px;
       margin-left:0px;}

header nav a{display:block;
       padding:10px 0;
       text-align:center;}

.leftcol{margin:0 0 0 0;
         width:100%;
         clear:left;}

.midcol{margin:0 0 0 0;
    width:100%;
    clear:both;}

.rightcol{margin:0;
      width:100%;
      clear:both;}

}/*closes media query*/

这是第二张图片(正常工作的图片)的代码。

HTML:

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="UTF-8">
<title>Responsive Design</title>
<meta name="viewport" content="width=device-width, minimum scale=1.0, 
maximum scale=1.0"/>
<link href="main.css" type="text/css" rel="stylesheet"/>
<script src="index.js"></script>
</head>

<body>
<div id="wrapper">

<header>
<nav id="skipTo">
    <ul>
    <li><a href="#main" title="skip to main content">
Skip to main content</a>
    </li>
    </ul>
</nav>

<h1>Logo</h1>

<nav>
    <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    </ul>
</nav>
<div id="banner">
    <img src="images/dogs.jpg" alt="dogs"/>
</div><!--closes banner-->
</header>

<!--2 column layout-->

<section id="main">
<h1>Section</h1>
</section>

<aside>
<h1>Aside</h1>
</aside>

<div class="clearfix">
</div>

<!--3 column layout-->

<div class="content">
<div id="middlecolumnleft">
    <h4>Content 1</h4>
</div><!--close middlecolumnleft-->


<div id="middlecolumnright">
    <h4>Content 2</h4>
</div><!--close middlecolumnmid-->


<div id="middlecolumnmid">
    <h4>Content 3</h4>
</div><!--close middlecolumnright-->

</div><!--close content-->

<div class="clearfix">
</div>


<!--hamburger menu-->
<nav class="desktop">
  <a href="#">Desktop 1</a>
  <a href="#">Desktop 2</a>
  <a href="#">Desktop 3</a>
  <a href="#">Desktop 4</a>
</nav>

<nav class="mobile">
<button>Toggle</button>
<div>
<a href="#">Mobile 1</a>
<a href="#">Mobile 2</a>
<a href="#">Mobile 3</a>
<a href="#">Mobile 4</a>
</div>
</nav>

<article>
<h1>Basic Hamburger Menu</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Porro quasi sint error perspiciatis quis rem nisi reiciendis 
doloribus cumque aliquid molestiae quos sed ex commodi ad 
eveniet asperiores distinctio vero.
</p>
</article>
<!--end hamburger menu-->


<footer>
<p>&copy;2016</p>
</footer>

</div><!--closes wrapper-->
</body>
</html>

CSS:

html{overflow:scroll}/*for tablets and phones*/

/*global styles*/
body{background-color:#ccc;
font-size:1.1em;
color:#666;
font-family:Arial, sans-serif;
line-height:1.4em;}

h1{margin-bottom:10px;
color:#111;}

a:link{border:none;
    color:#000;
    font-weight:bold;
    text-transform:uppercase;}

p {margin:0 0 10px;
font-size:1.2em;
header,main,footer,nav,section,aside(display:block;)} 
/*displays vertically*/

img{width:auto; height:auto; max-width:100%;}

/*Structure for desktop layout*/
#wrapper{width:100%;
max-width:1000px; 
margin:auto; 
padding:2%;}

/*logo*/    
header{width:auto;}
header h1{height:75px;
width:16%;
float:left;
display:block;}

header nav {float:right;
margin-top:40px;}

header nav ul{list-style-type:none;}

header nav ul li{display:inline;
        margin-left:15px;}
#skipTo{display:none;}
#skipTo ul{list-style-type:none;}
#skipTo ul li{background-color:#b1ffcc;}

/*main content*/
#main{width:60%;
  margin-right:5%;
  float:left;
  height:500px;
  background-color:green;}

aside{width:35%;
 float: right;
 height: 500px;
 background-color:green;}

#banner{float:left; 
    margin-bottom:15px;
    width:100%;}

#banner img{width:100%; width:auto;}

.clearfix{clear:both;}

/*3 column layout*/
.content{height:auto;
    width:100%;
    padding:20px 0; 
    clear:both;}

#middlecolumnleft{float:left;
              width:30%;
              margin-left:1%;
              height:200px;
              border:thick solid #000;}
#middlecolumnright{float:right;
               width:30%;
               margin-right:1%;
               height:200px;
               border:thick solid #000;}
#middlecolumnmid{margin-left:35%;
             width:30%;
             height:200px;
             border:thick solid #000;}

/*footer*/
footer{font-size:0.8em;
  padding-left:1%;
  height:25px;}

/*media query for phone*/
@media screen and (max-width:480px) {
#skipTo{display:block;}

header nav, #main, aside{
float:left;
clear:left;
width:100%;
margin:0 0 1% 1%;}

header nav ul li{margin:0;
       background-color:#efefef;
       display:block;
       margin-bottom:3px;
       margin-left:0px;}

header nav a{display:block;
       padding:10px 0;
       text-align:center;}

.content{padding-top:5px;
     margin:0;
     background-color:red;}

#middlecolumnleft{
margin:2% 0 0 1%;
width:100%;
clear:left;}

#middlecolumnright{
margin:2% 0 0 1%;
width:100%;
clear:both;}

#middlecolumnmid{
margin:2% 0 0 1%;
width:100%;
clear:both;}

}/*closes media query*/

/*hamburger menu*/

html {
height: 2000px;}

.mobile {
display: none;
position: fixed;
width: 100%;
top: 0;}

.mobile div {
  display: none;}

.mobile button {
 position: absolute;
 top: 15px;
 right: 15px;
 border: 0;
 text-indent: 200%;
 overflow: hidden;
 background: rgba(255,255,255,0.8) 
 url("http://i.imgur.com/vKRaKDX.png") center no-repeat;
 border: 1px solid #ddd;
 border-radius: 3px;
 background-size: 80%;
 width: 30px;
 height: 30px;
 outline: none;
 -webkit-transition: all 400ms ease;
 transition: all 400ms ease;}

 .mobile button.expanded {
 -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
 background-color: transparent;
 border: 0;}

.mobile a {
display: block;}

a {
 background: #eee;
 text-align: center;
 padding: 20px 0;
 border-bottom: 1px solid #ddd;
 text-decoration: none;
 color: #222;
 font-weight: bold;}

a:hover,
a:active,
a:focus {
  background: #e7e7e7;}

.desktop {
  display: block;
  overflow: hidden;}

.desktop a {
  width: 25%;
  float: left;
  border-right: 1px solid #ddd;
  box-sizing: border-box;}

.desktop a:last-child {
  border-right: none;}

article {
  padding: 0 30px 15px;}

@media (max-width: 800px) {
  .mobile {
  display: block;}
  .desktop {
  display: none;}
}


/*end hamubrger menu*/

不用担心汉堡菜单 - 我不需要这个元素。如果您认为可以快速找到解决方案，那么我将感谢您的帮助，但如果没有，请不要花太多时间在这上面。我和我的 friend 已经花了一整天的时间试图修复它。谢谢!

编辑:折叠时，页面应如下所示:

enter image description here

相反，它看起来像这样:

enter image description here

最佳答案

添加<div class="clearfix"></div>在 <div class="content"> 的底部, 就在结束标记之前。

正确的 HTML:

<!--3 column layout-->

<div class="content">
<div id="middlecolumnleft">
    <h4>Content 1</h4>
</div><!--close middlecolumnleft-->


<div id="middlecolumnright">
    <h4>Content 2</h4>
</div><!--close middlecolumnmid-->


<div id="middlecolumnmid">
    <h4>Content 3</h4>
</div><!--close middlecolumnright-->

<div class="clearfix">
</div>

</div><!--close content-->

CSS

.clearfix {
         clear: both;
}

关于html - 响应式设计 - 列不在 Div 标签内，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35166492/

上一篇：css - susy-breakpoint 和 susy-media 有什么区别？

下一篇：html - 语义 ui 左菜单占用太多空间

相关文章：

php - 使结账帐单地址字段填充为可用宽度的 100%

CSS 隐藏所有元素，除了带有特定子元素的元素

html - 我已经从表格转移到 CSS，并且在排列方面遇到了一些问题

html - 如何使另一个 div 中的 div 背景图像响应？

Jqueryui 可调整大小。光标通过其他元素来到前台

javascript - 如何通过指示高度使图像成为屏幕的整个宽度

HTML/CSS 文本对齐不起作用

html - 我的响应式网站只能在某些设备上正常运行

javascript - 同源策略

javascript - 为隐藏的输入 onclick 赋值

©2024 IT工具网  联系我们