Question

这适用于Firefox和IE，但Chrome上缺少右边的3个div。任何建议都会很棒。一些div（7,8,9）没有在Chrome上呈现，这很奇怪。这可能是Chrome的错误吗？

那里没有人可以回答这个问题吗？

Css和HTML

<style type="text/css">
.ma_content {
    min-height: 100%;
    margin-top:-40px;
    position: relative;
    overflow: auto;
    z-index: 0;
    width:800px;
}
.u_content {
    min-height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.u_content img:hover {      
    opacity: .8;
    -webkit-transform: scale(0.9,0.9);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(0.9,0.9);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.top_kutucuk {
    width: 300px;
    display: block;
}

.bottom_kutucuk {
    position: absolute;
    width: 300px;
    display: block;
    bottom: 0;
}

.left_kutucuk {
    display: block;
    float: left;
}

.right_kutucuk {
    display: block;
    float: right;
}

.center_kutucuk {
    display: block;
    width: 200px;
}

.kutucuk_1 {
    width: 800px;
    height: 400px;
    overflow:hidden;
}
.kutucuk_2 {
    width: 300px;
    height: 400px;
    overflow:hidden;
}

.kutucuk_3 {
    height: 400px;
    width: 300px;
    padding-bottom: 0px;
}

.kutucuk_4 {
    width: 300px;
    height: 150px;
    overflow:hidden;
}

.kutucuk_5 {
    height: 250px;
    width: 150px;
    padding-bottom: 0px;
    overflow:hidden;
}

.kutucuk_6 {
    height: 250px;
    width: 150px;
    padding-bottom: 0px;
    overflow:hidden;
}

.kutucuk_7 {
    width: 300px;
    height: 150px;
    overflow:hidden;
}

.kutucuk_8 {
    height: 250px;
    width: 150px;
    padding-bottom: 150px;
    overflow:hidden;
}

.kutucuk_9 {
    height: 250px;
    width: 150px;
    padding-bottom: 150px;
    overflow:hidden;
}

.kutucuk_10 {
    width: 800px;
    height: 150px;
    overflow:hidden;
}
</style>

<div class="ma_content">
        <div class="top_kutucuk kutucuk_1">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image4.png" width="198" height="396"></a>
                <div class="left_kutucuk kutucuk_3">
                    <div class="u_content">
                        <div class="top_kutucuk kutucuk_4">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image1.png" width="297" height="148"></a></div>
                        </div>
                        <div class="left_kutucuk kutucuk_5">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image2.png" width="148" height="248"></a></div>
                        </div>
                        <div class="right_kutucuk kutucuk_6">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image3.png" width="148" height="248"></a></div>
                        </div>
                    </div>
                </div>
                <div class="right_kutucuk kutucuk_2">
                    <div class="u_content">
                        <div class="left_kutucuk kutucuk_8">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image5.png" width="148" height="248"></a></div>
                        </div>
                        <div class="right_kutucuk kutucuk_9">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image6.png" width="148" height="248"></a></div>
                        </div>
                        <div class="bottom_kutucuk kutucuk_7">
                            <div class="u_content"><a href="#" title="" target="_self"><img src="Image7.png" width="297" height="148"></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="top_kutucuk kutucuk_10">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image8.png" width="797" height="148"></a>
            </div>
        </div>
    </div>

Answer 1

您的小提琴HTML始于：

<div class="ma_content">
        <div class="top_kutucuk kutucuk_1">
            <div class="u_content"><a href="#" title="" target="_self"><img src="Image4.png" width="198" height="396"></a>

添加float: left来锚定并在同一DOM级别的两个div之间移动它：http://jsfiddle.net/2LfLtem6/4/

简短说明：如果你将浮动的块div与内联内容混合在一起，那么你会非常头痛并且布局混乱：）

Answer 2

我看了你的小提琴（http://jsfiddle.net/2LfLtem6/）当你打开链接时，确实看不到Div 8,9和7 - 但是通过chrome检查器可以看到它们。

稍微调整一下css后，我发现你应该增加.kutucuk_1高度以适应其中的所有div。像这样：

.kutucuk_1 {
 width: 800px;
 height: 800px;
 overflow: hidden;
}

小提琴：http://jsfiddle.net/2LfLtem6/2/

以任何你想要的方式调整它

Chrome不显示div

2 个答案: