0

さまざまな方法でフォーマットする必要のあるポップアップを作成しました。 ここをクリックして表示してください

jsfiddle.netでは正常に表示されますが、コードをファイルに入れてChromeで表示するとpopup_item、サイズがとは異なるため、機能しませんpopup_heading。

私の質問は、私はこれを正しく行っているのか、それとも別の方法でこれを行うべきかということです。

jsfiddle.netで正常に表示されるのに、chromeでは表示されないのはなぜですか。Chromeを使用してjsfiddle.netを表示していますが、同じように表示されるべきではありませんか？

.popup_box table
{width:100%;}

jsfiddleに投稿されたコードは次のとおりです。

CSS：

.popup_box table
{
    width:100%;
}

.popup_overlay
{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background-image: url(http://localhost/justin/CenterNavigator/images/overlay.png);
}

.popup_frame
{
    width: 100%;
    position: fixed;
    top: 30%;
}

.popup_box
{
    width:50%;
    margin: auto;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    border:2px solid #000000;
    background-color:#999;
}

.popup_title
{
    border-radius: 20px 20px 0px 0px;
    background-color:#E3A20B;
    width: 98%;
    font-size: 270%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 1%;
}

.popup_heading
{
    width: 28%;
    float: left;
    font-weight: bold;
    font-size: 170%;
    text-align: right;
    padding: 1%;
}

.popup_item
{
    width: 68%;
    float: left;
    text-align: left;
    font-size: 170%;
    padding: 1%;
}

.popup_mesage
{
    width: 98%;
    float: left;
    text-align: left;
    font-size: 170%;
    padding: 1%;
}

.popup_1button
{
    width: 98%;
    float: left;
    text-align: center;
    padding: 1%;
}

.popup_2button
{
    width: 48%;
    float: left;
    text-align: center;
    padding: 1%;
}

.popup_3button
{
    width: 31.33333%;
    float: left;
    text-align: center;
    padding: 1%;
}

.popup_4button
{
    width: 23%;
    float: left;
    text-align: center;
    padding: 1%;
}

マークアップ：</ p> 

<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>layout</title>
</head>
    <body>
        <div class="popup_overlay">
            <div class="popup_frame">
                <div class="popup_box">
                    <table><tbody><tr><td>
                        <div class="popup_title">title</div>
                        <div class="popup_heading">heading:</div>
                        <div class="popup_item">data</div>
                        <div class="popup_heading">heading:</div>
                        <div class="popup_item">data</div>
                        <div class="popup_4button">button1</div>
                        <div class="popup_4button">button2</div>
                        <div class="popup_4button">button3</div>
                        <div class="popup_4button">button4</div>
                    </td></tr></tbody></table>
                </div>
            </div>
        </div>
    </body>
</html>
​
4

2 に答える 2

0

どうぞ

<div class="popup_overlay">
        <div class="popup_frame">
            <div class="popup_box">
                <div class="popup_title">title</div>
                <div class="popup_heading">heading:</div>
                <div class="popup_data">data</div>
                <div style="clear:both"></div>
                <div class="popup_heading">heading:</div>
                <div class="popup_data">data</div>
                <div style="clear:both"></div>
                <div class="popup_button">button1</div>
                <div class="popup_button">button2</div>
                <div class="popup_button">button3</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>
于 2012-10-20T14:36:19.607 に答える
0

あなたのコードは非常に無意味に書かれています。全体的に書き直しました。

<div class="popup_box">
    <div class="popup_title">title</div>
    <div class="popup_content">
        <div class="popup_header">
            <span class="popup_heading">heading:</span>
            <span class="popup_item">data</span>
        </div>
        <div class="popup_header">
            <span class="popup_heading">heading:</span>
            <span class="popup_item">data</span>
        </div>
        <div class="popup_buttons">
            <div class="popup_4button">button1</div>
            <div class="popup_4button">button2</div>
            <div class="popup_4button">button3</div>
            <div class="popup_4button">button4</div>
        </div>
    </div>
</div>
​

多くのdivがあることは知っていますが、それでもあなたが書いたものよりも優れています。テーブルは不要で、必要な CSS も少なくなります。

.popup_overlay {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: fixed;
    background: rgba(0,0,0,0.12);
}

.popup_box {
    width:50%;
    margin: 50px auto;
    border-radius: 20px;
    border: 5px solid #333;
    background-color: #3D668F;
    box-shadow: 0 5px 20px rgba(0,0,0,0.32);
    overflow: hidden;
}

.popup_title {
    width: 98%;
    font-size: 270%;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: white;
    padding: 1%;
}


.popup_heading, .popup_item  {
    font-weight: bold;
    font-size: 170%;
    padding: 1%;
}

.popup_item {font-weight: normal;}

.popup_4button {
    width: 23%;
    float: left;
    text-align: center;
    padding: 1%;
}
​
于 2012-10-20T15:33:59.017 に答える