Question

我有网站Click

当我调整右侧的Web浏览器（例如firefox）图像的大小时。我该如何解决？我想一直显示图像，标识。只有左侧网站可以像现在一样改变大小。

Answer 1

您正在处理一些相互冲突的目标：

您正在尝试使用固定宽度的右列。
您希望主要内容区域自动调整大小以适应屏幕。

不幸的是，正常的DIV和CSS宽度在处理固定宽度和动态宽度的组合方面并不是很好。

实现目标的一种方法是使用TABLE而不是DIVS进行布局。使用TABLE的好处是它们无处不在。但是，它们确实模糊了HTML的逻辑结构，因此很多人不喜欢使用TABLE进行可视化布局。如果您不想使用TABLE，则可以覆盖DIV的行为，使它们的行为类似于TABLE CELL。通过使用这种方法，您可以获得“两全其美” - 良好的可视化CSS布局和干净的逻辑HTML布局。

以下是您网站的演示，我相信您的行为正在寻找：

http://demo.likebike.org/calkieminnabajka.pl/

以下是我所做的调整：

我在“#site”DIV上使用CSS“background”属性，而不是在HTML中放置背景IMG。这是避免丑陋重叠的必要条件。
我从'#background_overlay'和'＃leftSite'DIV中删除了所有CSS属性。

我设置了以下CSS值：

#site {
    display: table-cell;
    background: url(background.jpg);
}
#rightSite {
    display: table-cell;
    vertical-align: top;
    width: 200px;
    background-color: white;
}

Answer 2

将width的{{1}}设置为body
您还可以设置正文的screen width属性

min-width

Answer 3

您的展示风格

<div style='display: table-cell; width:50%'>
  Left div
</div>
<div style='display: table-cell; width:50%'>
  right div
</div>

Answer 4

快速查看它你应该在右侧div设置％宽度 - 你的左边是80％而你的右边是固定在200px。所以当200％超过20％时不能内联。修复使一切都进入视野。您还需要将图像max-width设置为100％以防止溢出。示例css

#rightSite{
width:20%;
}
#rightSite img{
max-width:100%;
}

如何创建静态宽度的DIV

4 个答案: