1

幅が100％に設定されているCSS3のボックスの表示に問題がありますが、完全には行きません。どこかで間違いを犯したと思いますが、どこにあるのかわかりません:)。

HTMLコードとCSSで、「Box」と「Boxgray」の2つのボックスがあることがわかります。

ボックスdivは100％になりますが、ボックスグレーはそうではありません...ボックスグレーの幅を同じにします。

これが私のコードへのリンクです：

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

編集

2 つのヘッダー ボックスとフッター ボックスを 100% 幅にし、3 つの白いボックスをそれぞれ 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

次のような幅を修正してみてください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場合は、幅を小さくして、3つすべての合計幅が.boxGray親ラッパーの幅以下になるようにすることができます。何？しかし、これらの小さなフローティング div の親ラッパーがありません!! 次に、1 つを提供します。

この更新されたフィドルを参照してください

于 2013-03-18T08:48:57.797 に答える
0

ボックスの div は 100% になりますが、boxgray はそうではありません... boxgray の幅を同じにしたいです。

インライン CSS 幅を削除すると、.boxgrayクラスは 100% になります。

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

HTML で、すべての boxgray の幅を 283px に設定します。これを削除するだけで問題ありません。

于 2013-03-18T08:52:05.413 に答える