Question

我正在尝试将现有网站转换为自适应网站，但是有一件事我在这里挣扎：

http://www.brandonsuffolk.com

当您调整窗口大小时，我希望右侧列压缩左侧窗口，但是当它落在下面时（但是一旦屏幕击中另一个左侧div，它将会改变）。

当我使用单个div时，它可以工作，但是只要我在其中添加一个新div，它就无法正常工作。

以下是相关的CSS：

.MainOuter {
    float: left;
    width: 100%;
}
.MainWrapper {
    max-width: 980px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    padding-top: 0px;
    padding-right: 10px;
    padding-bottom: 0px;
    padding-left: 10px;
}
.ColumnRight {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
    float: right;
    width: 290px;
    padding: 0px;;
}
.ColumnLeft {
    margin-top: 20px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    float: left;
    width: auto;
    max-width: 670px;
    padding: 0px;
}

Answer 1

我担心你正在与正常的响应过程作斗争。响应性应该只是做它正在做的事情。如果您不希望它被删除，请找到此元素的@media并将其更改为：

@media (min-width:0px) {
    width:50%;
}

这可能会有所帮助

Answer 2

假设我明白了，并且您希望右侧列保持固定宽度，则需要使用position:absolute和left值的right和{{ 1}}设置为width。这为您提供了固定的一面和一面占据屏幕其余部分的一面。

希望它仅在触摸后应用，是您必须使用媒体查询的地方。将媒体查询设置为仅在屏幕低于1000px时应用，这将告诉左列更改并变得灵活。

修改

尝试将此CSS添加到您网站的CSS文件中。此外，我已经更新了小提琴，以显示它是如何工作的。你可能需要调整一些数字，但它会做你需要的。

Example Fiddle

auto

Answer 3

这是你的意思＆＃34;壁球＆＃34; ？

http://jsfiddle.net/7QVVz/

CSS

.wrap {
   display: table;
   width: 100%;
}

.left {
   display: table-cell;
   border: 1px solid green;
   width: 350px;
   max-width: 350px;
}

.right {
   display: table-cell;
   border: 1px solid red;
}

.right > .text {
   width: 200px;
   float: right;
   border: 1px solid yellow;
}

HTML

<div class="wrap">
   <div class="left">LEFT</div>
   <div class="right">
      <div class="text">RIGHT TEXT</div>
   </div>
</div>

两栏响应网站问题

3 个答案: