html - 框宽度 100% 的 CSS3 问题

标签 html css

我在显示一些 CSS3 框时遇到问题,其中宽度设置为 100% 但没有完全显示,我确定我在某处犯了错误,但我不确定在哪里 :)。

您会在 HTML 代码和 CSS 中看到有两个框:“Box”和“Boxgray”

box div 一直到 100% 但 boxgray 不是...我希望 boxgray 的宽度相同。

这是我的代码的链接:

http://jsfiddle.net/gEtp6/2/

谢谢

<div class="box" style="background-color:#DDDDDD;background-image:-webkit-linear-gradient(top, #FFFFFF 5%, #F0F0FF 70%, #E3E7F7 100%);">
        <h1>Download Our Software</h1>

        Download Our Software

    </div>

    <div class="boxgray" style="width:283px; height:180px;">
        <h2><img src="images/windows.png" alt="Download for Windows">
            <a href="Install.exe" onclick="javascript: pageTracker._trackPageview('download.kit.Windows');" >Windows Installer</a></h2>
        No requirements.
    </div>

    <div class="boxgray" style="width:283px; height:180px;">
        <h2><img src="images/linux.png" alt="Download for Linux">
            <a href="Install.jar" onclick="javascript: pageTracker._trackPageview('download.kit.Linux');" >Linux</a></h2>
        Java 1.6 or later required.
    </div>

    <div class="boxgray" style="width:283px; height:180px;">
        <h2><img src="images/mac.png" alt="Download for Mac">
            <a href="InstallMac.dmg" onclick="javascript: pageTracker._trackPageview('download.kit.mac');" >Mac</a></h2>
        <small>On MacOS 10.8 you have to set in System Preferences / Security & Privacy / Allow Applications from Anywhere. We are working to fix this issue.</small>
    </div>

    <div class="box" style="width:100%">
        <h2>Alternative Download</h2>
        For all platforms you can download a <a href="asd.zip" onclick="javascript: pageTracker._trackPageview('download.kit.zip');" >zip package</a>.
        Java 1.6 or later is required.
        <p>
        In case of problems with the downloaded package or any issue with the software please <a href="support.html">let us know</a>.
        asdasdasdasdasd

        <p>
        <h2>Connect asdasdasd</h2>
        asdasdasdasdasdasdasdasdasdasdasd
        In this cases please <a href="support.html">write us</a>. 


    </div>

最佳答案

尝试固定 box 的宽度,例如:

.box{
    width: 1024px;
}

正常情况下它可以正常工作。

关于html - 框宽度 100% 的 CSS3 问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15472446/

相关文章:

jquery - 调整大小时弹出警报离开屏幕

javascript - 如何根据 div id 更改链接?

html - 盒子阴影底部像括号

javascript - 如何使用 React Scrollbars 获取在垂直滚动期间滚动到 View 中的 React 组件的 ref 或信息?

css - box-sizing: border-box 没有声明高度/宽度

javascript - 使用 jQuery 有选择地提交字段而不使用 AJAX

javascript - HTML 连接 img 标签内的跨度

Jquery .click 事件处理程序不适用于 CHROME 中的类选择器

jQuery:设置整个元素的不透明度,除了 child ?

javascript - 提交表单后显示模态直到下一页加载...不适用于 safari?