Question

在此页面上，您会在左侧的侧面板上看到一篇博文，其中包含缩略图，标记集和其他信息：http://www.elegantthemes.com/preview/TheStyle/2010/10/morbi-rutrum-interdum-justo/。

我要做的是在这个白色div上创建一个黑色矩形，一个黑色矩形，从白色div的左上角延伸到底部，就在帖子文本的左边。

首先，我尝试简单地创建一个像素宽的双色图像，并使用repeat-y从上到下扩展“仿两列”布局。但是，这个div会动态调整大小，因此在很多情况下，帖子中的黑色文本最终会运行到此侧边栏中。

然后我尝试以相同的方式使用相同的图像，但给白色div一个“位置：绝对”特征。这导致右侧的侧边栏溢出到帖子内容上。

我想创建这个黑色矩形以占据帖子内容左侧的任何空格。

我继承了很多CSS，我不知道如何改变。任何建议将不胜感激。 `

如果我能找到某种方法，我会在这里添加style.CSS文件。这是我第一次访问该网站。

Answer 1

查看CSS，它说你说的一切都在它自己的div中：

<div class="info-panel">

话虽如此，您只需对该类进行CSS更改即可。你会做类似的事情：

.info-panel {
    background-color: #000;
}

但请记住，为了让它看起来不错，你应该使用信息面板和后内容类的填充和边距。

我只是通过包含以下内容让它看起来更好并保持相同的整体宽度：

.post-content {
    background: url("images/entry-bottom-bg.png") repeat-x scroll left bottom transparent;
    padding: 0 4% 30px 1%;
}

.info-panel {
    background: none repeat scroll 0 0 #000000;
    float: left;
    margin-right: 1%;
    padding: 2% 0 2% 2%;
    width: 29%;
}

CSS的最后两个代码片段只是一些建议，如果我的解决方案适合你，我会怎么做。并不意味着你拥有，所以请不要这样对待。它只是让这个区域看起来很糟糕。

Answer 2

很难解读你究竟想做什么，但看看这是否有帮助：

.post-content.info-panel {
    background-color: black;
    padding: 4px;
    width: 28%;
}

如何在不改变div颜色的情况下更改此信息面板的颜色？

2 个答案: