Question

我在显示一些CSS3的问题时遇到了问题，其中宽度设置为100％但不是一直都是这样，我确定我在某个地方犯了一个错误，但我不知道在哪里:)。

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

盒子div一直到100％，但盒子不是......我希望boxgray的宽度相同。

以下是我的代码链接：

由于

<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>

Answer 1

尝试修复box的宽度，如：

.box{
    width: 1024px;
}

通常可行。

Answer 2

但您已为您的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 -->

请参阅此fiddle

更新

因此您希望将div.boxGray对齐在一行中，您可以给它们一个较小的宽度，这样三个.boxGray的组合宽度应该小于或等于他们的父包装器。什么？但你没有那些小浮动div的父包装!!然后提供一个。

请参阅此更新fiddle

Answer 3

盒子div一直到100％，但盒子不是......我想要的 boxgray的宽度相同。

删除内联CSS宽度，.boxgray类将为100％。

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

Answer 4

修改

如果您希望两个页眉和页脚框都是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-background div被称为box，而您的white-background div被称为boxgray ......？

Answer 5

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

框宽为100％的CSS3问题

5 个答案: