Question

以下div包含vetical文本（是页面左侧的页面标题）。问题是垂直文本溢出其div并与另一个内容div重叠。我做过这样的事情：

<style type="text/css">
.vertical_text{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    display:block;
    white-space:nowrap;
    direction:rtl;
    margin:0;
    color:#000;
    padding:0 10px 0 0;
}
</style>

<!--left sidebar-->
<div class="vertical_text" style="width:30%;">
    Vertical text that overlap bottom div content
</div>
<!--right sidebar-->
<div style="width:70%;">
    Main page content
</div>

<!--Footer-->
<div style="width:100%;">
    Footer div. Content in this div is covered by vertical text
</div>

如何防止重叠其他div内容？我需要将页脚div向下移动以防止其内容重叠。

感谢您的帮助，维克多

Answer 1

评论后编辑

我添加了一些Jquery脚本来管理动态高度。并将旋转div移动到另一个中以保持分割30％/ 70％

JsFiddle

CSS

.vertical_text{
    direction:rtl;
    margin:0;
    color:#000;
    white-space:nowrap;
}
.rotate{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

HTML

<!--left sidebar-->
<div style="float:left;width:30%">
    <div class="vertical_text" >
        Vertical text that overlap bottom div content
    </div>
</div>
<!--right sidebar-->
<div style="width:70%;float:left">
    Main page content
</div>
<div style="clear:both">
</div>    
<!--Footer-->
<div style="width:100%;margin-top:10px;">
    Footer div. Content in this div is covered by vertical text
</div>

JAVASCRIPT

$(function() {
   $(".vertical_text").height($(".vertical_text").width());
    $(".vertical_text").addClass("rotate");
});

CSS - 垂直文本与另一个div内容重叠

1 个答案: