兩列響應網站問題

我想現有的網站轉化爲響應但是有一兩件事，我在這裏掙扎：兩列響應網站問題

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; 
}

來源

2014-03-12 user3410844

通過壁球你通過保持其7/3的比例meen？ –

不完全是那些比例沒有。只要divs見面，我想要左邊的那個改變，並用300px的右邊填充空白。解決這個問題後，我可以理清的其他事情。 – user3410844

假設我明白了，你想要的右側欄保持固定寬度，則需要使用position:absolute，並使用left和right值，並將width設置爲auto。這給你一個固定的一面和一面，佔領屏幕的其餘部分。

希望它只適用於他們接觸後，雖然，你必須使用媒體查詢。將媒體查詢設置爲僅在屏幕低於1000像素時應用，這會告訴左欄在那裏更改並變得靈活。

編輯

嘗試加入這個CSS到您的網站的CSS文件，在年底。此外，我更新了小提琴，以顯示它的工作原理。你可能需要調整一些數字，但它會做你需要的。

Example Fiddle

@media screen and (max-width: 1000px) { 

    .ColumnLeft { 
     position: absolute; 
     left: 20px; 
     right: 320px; 
     width:auto; 
    } 

}

來源

2014-03-12 13:38:05

這似乎確實起作用，但是你說如果我只希望它在他們見面時發生，那麼它就是這樣做的。在我的合適地點，他們已經彼此相鄰，這是否有所作爲？ – user3410844

這樣，當屏幕足夠寬以至兩者之間有空間時，它們會浮起並固定寬度。當屏幕足夠小，他們會觸摸，然後左邊變得靈活。 –

我現在編輯了我的原始問題，以顯示正確的網站和CSS。希望你能看到我想要做的事情。 – user3410844

恐怕你戰鬥反應過程的正常進行。反應能力應該做它正在做的事情。如果你不希望它在下降，找到該元素的@media並將其更改爲：

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

這可能有助於

來源

2014-03-12 13:33:25 LOTUSMS

願這是你的意思與「南瓜」是什麼？

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>

來源

2014-03-12 13:45:59 user3410973

兩列響應網站問題

回答

相關問題