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，我知道，但它仍然比你写的 imo 更好。不需要表格，你需要更少的 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 回答