创建一个不需要溢出的容器:auto

时间:2014-06-15 04:56:54

标签: html css

以下是问题的链接。 http://garethjweaver.com/portfolio/gjw/index.php?page=gjw

尝试创建容器而不必使用溢出。我有所有内容的主容器,如此。

.container {
max-width: 1000px;
margin-left: auto;
margin-right: auto;
padding: 10px;
}

到目前为止,我通过在其周围放置边框来测试它,并显示它涵盖了所有内容。

现在,当我尝试为另一个部分做另一个容器时,它不起作用。像这样。

http://jsfiddle.net/4wN8q/

这是我试图制作的另一个容器..

.portfolio-container {    
width: 980px;
margin-left:auto;
margin-right:auto;    
}

但是当我在它周围添加一个边框时,它并没有涵盖所有内容,它只是保持在顶部覆盖什么。溢出:auto可以解决这个问题,虽然当我试图让我的图像响应时,滚动条会显示在底部并且它不会缩放,如果我将溢出,它将会起作用。

提前致谢。

编辑:已更新以包含其代码

<div class="portfolio-container">

<div class="content-container">
<div class="content">
Text  Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text Text Text Text Text
     Text Text Text Text Text Text Text Text


 </div>
<div class="arrows">
    <a class="portfolio-button" href="#">Visit Website</a>

    <a href="index.php?page=qwd"><i class="float-left fa fa-arrow-circle-o-left fa-3x"></i></a>
    <a href="index.php?page=pf"><i class="float-right fa fa-arrow-circle-o-right fa-3x"></i></a>
</div>

</div>


<div class="portfolio-images">

    <img class="image-padding"src="./images/cz1-chrome.png">
    <img src="./images/cz-chrome.png">

</div>

1 个答案:

答案 0 :(得分:0)

必须更改图像样式而不是删除溢出