Question

HTML

 <div id="nav">
        <div id="nav_wrapper">
            <ul>
                <li><a href="index.html">Home</a></li><li>
                <a href="#">Licensing</a></li><li>
                <a href="#">About us</a></li><li>
                <a href="#">Testimonials</a></li><li>
                <a href="#">Contact Us</a></li><li>
                <a href="#">Social <img src="image/arrow.png" width="8" height="4" /></a>
                    <ul>
                        <li><a href="http://Youtube.com"><img src="image/social/YouTube.png" width="32" height="32" title="Youtube" /></a></li>
                        <li><a href="http://Twitter.com"><img src="image/social/Twitter.png" width="32" height="32" title="Twitter"></a></li>
                        <li><a href="http://Facebook.com"><img src="image/social/Facebook.png" width="32" height="32" title="Facebook"></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div id="content">
        <img src="image/placeholderimg.png">
        <h2>Overview</h2>
        <p>Filler Text</p>
    </div>
 </div>

CSS3

#content 
{
    margin-left: auto;
    font-family: Arial, Helvetica, sans-serif;
    resize: both;

}
#content p
{
    max-width: 1100px;
    margin: 0;
    color: #ccc;
    min-width: 960px;
}
#content h2
{
    margin: 0;
    color: #ccc;
    min-width: 960px;
}
#content img
{
    float: left;
    padding-right: 20px;
    padding-bottom: 20px;
}
#wrapper
{
     min-width: 960px;
     width: 50%;
     margin: auto;
}

修正了CSS3代码

#content 
{
    padding-top: 10px;
    font-family: Arial, Helvetica, sans-serif;
    resize: both;

}
#content p
{
    max-width: 1100px;
    margin: 0;
    color: #ccc;
    min-width: 960px;
}
#content h2
{
    margin: 0;
    color: #ccc;
    min-width: 960px;
}
#content img
{
    float: left;
    padding-right: 20px;
    padding-bottom: 20px;
}
#wrapper
{
     min-width: 960px;
     width: 50%;
     margin: auto;
}

所以我一直在四处寻找解决方案，但似乎我找不到一个......所以我来问问这里经验丰富的程序员-溢出。我的问题是我需要内容div与其他元素一起重新调整大小，但我似乎无法正确地做到这一点。我不想使用溢出来完全删除它，我希望它随着页面重新缩小而缩小。无论如何做到了吗？上面提供的是css3代码以及我尝试重新调整大小的html div。我试图重新调整大小的主要内容是内容，或者如果可能的话，将包装作为一个整体。

编辑：出于某种原因，我做了一件我无法解释修复代码的事情，有些人可以如此友好地向我解释我做了什么吗？

Answer 1

width:auto;

尝试将此应用于您的代码以及＆＃34; min-width＆＃34; ..我不知道它是否有效，但一旦试一试..

Answer 2

CCS3属性＆＃34;调整大小＆＃34;允许用户拖动内容div并调整其大小。你应该使用;

width: auto;

或者你可以使用;

width: 100%;

Answer 3

查看小提琴。您无需设置p或h标签的宽度。他们通常占据了整个空间。

将容器设置为宽度：100％应该这样做。

http://jsfiddle.net/92gnt7qt/4/

#nav {width: 100%;min-width: 960px;}
#nav_wrapper {width: 100%;}
#content 
{
    width: 100%;
    min-width: 960px;
}

如果您的父母的最小宽度为960px且孩子的宽度为100％，则孩子们仍然只能达到960px。

Answer 4

似乎删除了

    margin: auto;

它是如何自动配置它到我想要它做的。有人能帮助我理解这个吗？

CSS3内容和包装器div不会自动调整大小

4 个答案: