Question

我有一个包含3列的div，每列设置为包含缩略图图像链接。我设计了这个div - .reading-pane - 以获得正确的边距和边框以适应我的设计。还有一个内部div - row_inner_wrapper - 由我正在使用的主题创建。没有为此div设置宽度 - 它应该只容纳三个缩略图div。但是，.row_inner_wrapper div比图像div的总数更宽，并使.reading-pane div延伸到页面右侧。

我找不到使用Firebug导致此问题的样式。但是，在Chrome中我可以看到，当我将鼠标悬停在此div上时会应用右边距，即使没有应用此类样式规则。我甚至可以在这个div上设置margin:0px !important并保留余量。关于我的幻影CSS可能来自哪里的任何建议？

您可以在此处查看相关网页http://jpsingh.samcampsall.co.uk/galleries/

HTML

<div class="reading-pane">
    <div class="row_inner_wrapper">
        <div class="row_inner">
            <div class="themify_builder_sub_row clearfix">
                <div class="col3-1">
                </div>
                <div class="col3-1">
                </div>
                <div class="col3-1">
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.reading-pane{
background-color:#ffffff;
background-image: url('leftcolumn.png');
background-repeat:repeat-y;
margin:30px;
padding:25px 25px 25px 103px;
}
.row_inner_wrapper{
margin:0px 0px 0px 0px !important;
}

Answer 1

在你的.reading-pane div中你有班级

.full_width.sidebar-none .themify_builder .themify_builder_row。

此类有一个规则width: 100%;。当我删除此规则时，.reading-pane div已正确定位。

Answer 2

只需将下面的代码块宽度设置为auto即可。 100％超出其父母。

 .themify_builder_row.fullwidth, 
.themify_builder .module_row.fullwidth, 
.full_width.sidebar-none .themify_builder .themify_builder_row {
 width: auto;
}

CSS在Wordpress主题中被覆盖

2 个答案: