屏幕/内容更改时防止div的水平扩展

时间：2014-06-29 15:15:33

标签： html css webpage

我的主要内容存在问题。随着屏幕调整大小或主要内容的文本变大，它会按预期向下扩展，但它也会在我左侧的菜单下面，这是我不想要的。

有人可以审核我的代码并告诉我如何解决这个问题吗？

图像： Image of what I want vs what is occurring 

<html>

<head>
<link type="text/css" rel="stylesheet" href="css/styles.css"/>
<link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,400italic' rel='stylesheet' type='text/css'>
<title>page title</title>
</head>

<body>

<div class="pagediv">
<div class="headermain">
Title
</div>
<div class="headerquote">
 quote
</div>
<div class="menu">
<p><a href="link">Home</a></p>
<p><a href="link">About the Artist</a></p>
<p><a href="link>"Blog</a></p>
<p><a href="link">Artist Statement</a></p>
<p><a href="link">Inspiration</a></p>
<p><a href="link">Art Gallery</a></p>
<p><a href="link">Exhibits</a></p>
<p><a href="link">Store</a></p>
<p><a href="link">Commissioning</a></p>
<p><a href="link">Contact</a></p>
</div>

<div class="artist_pic">
<img src="picture link">    
</div>

<div class="content_type_a">
<p>CONTENT HERE</p>
</div>   

<div class="footer">

我的CSS如下：

body {
background-color: black;

}

/*contains the page in the center of the browser*/
.pagediv {
margin-left: auto;
margin-right: auto;
width: 70%;
background-color: black;
}

/*Main title bar at the top of the page*/
.headermain {
background-color: black;
font-family: 'Josefin Slab', serif;
color: #FFF;
font-size: 200%;
font-style: bold;
display: block;
    width: 100%;
padding-top: 30px;
}

/*Quote after the main title*/
.headerquote {
background-color: black;
font-family: 'Josefin Slab', serif;
font-size: 110%;
font-style: italic;
color: #FFF;
padding-top: 5px;
padding-left: 60px;
padding-bottom: 5px;
display: block;
}

 /*headerquote bottom border*/
.headerquote {
border-bottom: 2px solid white;
} 


.menu {
background-color: black;
width: auto;
font-family: 'Josefin Slab', serif;
color: #FFF;
font-size: 110%;
font-style: bold;
text-align: right;
display: inline-block;
float: left;
clear: right;
clear: both;
padding-right: 15px;
height: px;
}

.menu a:link {
text-decoration: none;
color: #FFF;
font-size: 110%;
}

.menu a:hover {
color: #FFF;
font-size: 110%;
text-decoration:underline;
}

.menu a:visited {
text-decoration: none;
color: #FFF;
font-size: 110%;

}

.artist_pic {
display: inline-block;
width: auto;
clear: none;
position: relative;
float: left;
margin-left: 0px;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 10px;
}


.content_type_a {
background-color: black;
font-family: Arial, serif;
font-size: 100%;
color: #FFF;
width: auto;
float: 40%;
clear: none;
display: block;
text-align:justify;

}
.construction {
background-color: black;
font-family: Arial, serif;
font-size: 100%;
color: #FFF;
display: block;
text-align:justify;
}

.construction img {
background-color: transparent;
height: 150px;
border: none;
width: auto;
font-family: Arial
color: #FFF;
font-size: 100%;
font-style: bold;
text-align: center;
padding: 20px 0px 0px 100px;
}

.footer {

}

4 个答案:

答案 0 :(得分：0)

你可以删除

text-align:justify;

来自.content_type_a样式并添加

position: absolute;
left: 220px;

请参阅http://jsfiddle.net/bULaF/

答案 1 :(得分：0)

这个问题有现成的解决方案。它们被称为网格系统。

它们是为了缓解这个问题而发明的。

请参阅以下内容，例如：

  • 960 grid system
  • Twitter Bootstrap - 这是一个CSS / JS 框架，但它有一个相当不错的网格系统。有可能 对你正在尝试做的事情有些过分，但也许它会对你有所帮助 你的表格也是如此（如果你有的话）

他们有一个（非常）小的学习曲线，但我认为这是值得的。

答案 2 :(得分：0)

.menu {
float: left;
}

原因是，如果菜单不高于允许在其周围浮动的内容，那么当内容低于菜单时，它会有更多空间。

包装器和左边距：负值是解决方案之一，通常具有固定的菜单宽度。

<div id="wrapper">
<div class="menu">
<p><a href="link">Home</a></p>
<p><a href="link">About the Artist</a></p>
<p><a href="link>"Blog</a></p>
<p><a href="link">Artist Statement</a></p>
<p><a href="link">Inspiration</a></p>
<p><a href="link">Art Gallery</a></p>
<p><a href="link">Exhibits</a></p>
<p><a href="link">Store</a></p>
<p><a href="link">Commissioning</a></p>
<p><a href="link">Contact</a></p>
</div>

<div class="artist_pic">
<img src="picture link">    
</div>

<div class="content_type_a">
<p>CONTENT HERE</p>
</div> 
<div style="clear:both"><!-- note we should clear floats with some type of content or tag --></div>
</div> <!-- end wrapper -->

现在添加左边距

.wrapper {
left-margin:200px;
}
.menu {
left-margin:-200px;
width:200px;
}

现在内容不会包裹菜单，无论它是否浮动。

答案 3 :(得分：0)

您的浮动图像应位于菜单旁边的容器内。

要不允许将/ main容器放在浮动菜单下，只需使用overflow触发布局。的 DEMO

主容器的CSS变为：

.content_type_a {
background-color: black;
font-family: Arial, serif;
font-size: 100%;
color: #FFF;
width: auto;
overflow:hidden;/* here mind outside and inside floatting elements*/
clear: none;
display: block;
text-align:justify;
}

Float:40%; 不存在，只需：none，right或left作为正确的值。

相关问题
最新问题