English 中文(简体)
随着容器体积扩大,元素被挤出
原标题:overflow? as container size gets bigger, elements get pushed out
  • 时间:2012-05-25 06:26:42
  •  标签:
  • html
  • css

当我把“. container”中的 cs 从“ width: 800px” 改为“ width: 1900px” 时, 所有的元素都断电了。 橙色盒子一直靠左侧, 而不是以中枢。 有人知道为什么会发生这种情况吗? 我的朋友说这可能与溢出有关, 但他不确定 。

图片1:宽度: 1900px

Picture 2:width 800px HTML:

        <div id="orangeBox">

            <img src="images/logo.png" alt="Dash Logo" id="logo" />

            <div id="snappyText">
                <p>Ever think,"Where are the most mediocre places to eat around here? I want me some of that."</p>
            </div>  

            <div id="response">
                <p>Yeah, neither do we.</p>
            </div>

            <img src="images/whiteLine.png" alt="White Line" id="whiteLine" />

            <img src="images/iphone.png" alt="iPhone" id="iphone" />

            <img src="images/videoScreenshot.png" alt="Video Screenshot" id="videoScreenshot" />

            <img src="images/appStoreWhite.png" alt="App Store" id="appStoreWhite" />

            <div id="explanatoryText">
                <p>Dash is the quickest way to find good places to eat. In a world with too many choices and too much information, Dash clears the clutter and offers only the best in your area.</p> 
            </div>

            <ul id="menu">
                <li><a href="http://boxoutdev.com/">Blog</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>

            <a href="http://twitter.com/#!/thedashapp"><img src="images/twitterGray.png" alt="twitter" id="twitterGray" /></a>

            <a href="http://www.facebook.com/"><img src="images/facebookGray.png" alt="facebook" id="facebookGray" /></a>

        </div><!--end orangebox-->
    </div><!--end container-->

CSS :

body{
    background: url(images/grayBackground.png);
}

/*orangeBox*/

#orangeBox{
    background-image:url(images/orangeBackground.png);
    background-repeat:no-repeat;
    position:relative;
}




.container{
    width:800px;
    margin:0 auto;
    position:relative;
}

"https://i.sstatic.net/XyE2N.png" alt="width: 1900px"/>

"https://i.sstatic.net/dXxw9.png" alt="width:800px"/>

最佳回答

为何不改换你的CS换成这个

min-width:800px;
    width:auto;

成功的话试试看

问题回答

暂无回答




相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签