CSS 布局文本涌入 Navigatio

标签 css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 9 年前

我正在使用我挑选并根据自己的喜好进行修改的模板。我正在构建一些模板,我测试的最后一件事是“内容”区域!

问题: 问题是,我希望左侧的导航栏(单击下拉菜单的标题)随着内容的增长而增长并保持“空”。现在您看到内容区域正在流入导航区域。我希望内容区域在右上角的图片(产品图片)的中间和下方流动。

网站: http://www.mediaortech.com/swiss3/productpagetemp.html在这里查看问题。

CSS 这是我正在玩的 layout.css。如果需要,您可以检查来源,但是...

Nav是col-1,中间是col-2,右边是col-3

/*======= index-2.html =======*/
#page3 #content .row-1 .line-ver { background-position:190px top;}
#page3 #content .row-1 .line-ver-1 { background-position:647px top;}
#page3 #content .row-1 .col-1 {
width:190px;
margin-right:30px;
height:auto;
}
#page3 #content .row-1 .col-2 {
    width:430px;
    vertical-align:top;
    position:relative;
    margin-left:188;
}
#page3 #content .row-1 .col-2 .small {
height:20px;
width:100%;
}

#page3 #content .row-1 .col-2 .downloads {
height:110px;
width:425px;
}
#page3 #content .row-1 .col-3 { width:282px; float:right;}
#page3 #content .row-1 .col-4 { width:100%;}
#page3 #content .row-1 .col-4 .content1 {
height:100%;
}
#page3 #content .row-2 .line-ver1 { background-position:647px top;}
#page3 #content .row-2 .col-1 {width:628px; margin-right:40px;}
#page3 #content .row-2 .col-2 { width:267px;}

这是描述它的最佳方式...如果菜单被展开,内容就会像它应该的那样被推送...尽快收缩它...有更多的内容文本溢出到导航栏中。

我试过玩漂浮物……我只是不确定该怎么做。感谢您的大力帮助!

最佳答案

首先从 .col-4 中删除 width:100% 然后这样写:

#page3 #content .row-1 .col-4 {
    clear: right;
    overflow: hidden;
}

关于CSS 布局文本涌入 Navigatio,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9494663/

上一篇:jquery - 你如何用 JQuery 找到非计算的 css 宽度

下一篇:javascript - 调整容器分区大小时,css float 布局不移动

相关文章:

javascript 使用 # id 聚焦于 div 元素

html - 如何更改 <select> 中 <option> 元素的字体大小?

HTML SVG <image> 模糊/裁剪 Angular

javascript - 我正在制作我的作品集,我想使用 Spotify API 来显示我当前正在收听的内容,但不想使用“播放”按钮

CSS 不适用于除 IE 以外的其他浏览器

css - css 值#def 是什么?

html - CSS div高度继承

javascript - 有没有比纯 CSS 2 更好的、符合标准的方法来为网站制作下拉导航?

css - 带分隔符的 Bootstrap 按钮组

javascript - 带有 svg 图像分层的交互式 WebGL 背景