1

我在显示一些 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>
4

5 回答 5

0

尝试修复box类似的宽度：

.box{
    width: 1024px;
}

通常它可以工作。

于 2013-03-18T08:43:40.120 回答
0

但你给你的内联样式div.boxGray 

<div class="boxgray" style="width:283px; height:180px;">

删除inline width或将其设置为100%;

即这样做

   <div class="boxgray" style="width:100%; height:180px;">
   <!--width changed to 100% -->

或这个

   <div class="boxgray" style="height:180px;"> 
   <!--width removed, as .boxGray class contains 100% width already -->

看到这个小提琴

更新：

所以你想 div.boxGray在一行中对齐，你可以给它们一个更小的宽度，这样，所有三个的组合宽度.boxGray应该小于或等于它们的父包装器的宽度。什么？但是你没有那些小的浮动 div 的父包装！！然后提供一个。

看到这个更新的小提琴

于 2013-03-18T08:48:57.797 回答
0

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

删除内联 CSS 宽度，.boxgray类将是 100%。

 <div class="boxgray" style="width:283px; height:180px;">
于 2013-03-18T08:50:06.067 回答
0

编辑

如果您希望两个页眉和页脚框的宽度为 100%，而三个白色框的宽度分别为 33%，那么您可以这样做：

div.box {
    width: calc(100% - 32px);
}
div.boxgray {
    width: calc(33.3% - 32px);
}

演示：http: //jsfiddle.net/LNahL/2/

32px 由（5px 边距 + 10px 内边距 + 1px 边框）* 2 边计算得出

最后一点：你的gray-backgrounddiv 被称为box，而你的white-backgrounddiv 被称为boxgray... ？

于 2013-03-18T08:50:51.840 回答
0

在您的 HTML 中，您将所有 boxgray 的宽度设置为 283px。只需删除它，它应该没问题！

于 2013-03-18T08:52:05.413 回答