我想限制我調整大小divs到最大和最小寬度

-1

我正在構建一個網站建立一個wordpress響應主題作爲父。我在頁面的左側有一個內容部分（content-blog），在頁面的右側有一個側邊欄（小部件）。我讓他們設置爲縮小瀏覽器的大小，但我想設置一個最小寬度，以便它們不會在較小的瀏覽器上縮小。我希望側邊欄在特定寬度點的主要內容下移動。這裏是我的HTML和CSS。我想限制我調整大小divs到最大和最小寬度

HTML：

<body> 
    <div id="header"> 
    /* content */ 
    </div> <!-- end header --> 

    <div id="container" class="hfeed"> 
    <div id="navigation"> 
    /*content */ 
    </div> <!-- end navigation --> 

    <div id="feature"> 
    /* content */ 
    </div> <!-- end feature --> 

    <div id="wrapper" class="clearfix"> 

    <div id="content-blog" class="grid col-620"> 
    /*content */ 
    </div> <!-- end content-blog --> 

    <div id="widgets" class="grid col-300 fit"> 
    /* content */ 
    </div> <!--end widgets --> 
    </div> <!-- end wrapper --> 

    <div id="footer" 
    /* content */ 
    </div> <!--end of footer- --> 

</body>

CSS：

body { 
background: none repeat scroll 0 0 #2D2C2A; 
color: #2D2C2A; 
} 

#container { 
max-width: 1100px; 
margin: auto; 
margin-top: 15px 
} 

#wrapper { 
max-width: 1010px; 
width: 100% 
margin: auto; 
margin-top: 15px; 
border: none; 
} 

#content-blog { 
margin-bottom: 20px; 
margin-top: 16px; 
max-width: 65%; 
min-width: 45%; 
width: auto; 
} 

#widgets { 
float: right; 
margin-top: 40px; 
max-width: 32%; 
width: auto; 
}

該網站是podcastanswers.com有沒有什麼幫助也。我曾嘗試設置最小寬度，但不管瀏覽器縮小div的大小是否繼續變小，從不停止在最小設置。我確信這是我錯過了或者沒有理解的東西，但是我一直沒能在我的搜索中找到答案。謝謝大家。

來源

2014-01-06 user3166705

建立一個小提琴是不是添加更好指向該帖子的鏈接，因爲該鏈接不會幫助未來的用戶改變網頁。 – Phlume

您可能想要使用[CSS媒體查詢]（http://cssmediaqueries.com/） – zgood

爲什麼不按F12並查看您發佈的網站實際上的工作方式:)您可以看到使用了媒體查詢。 – ChandlerQ

百分比度量標準相對於屏幕的當前大小，而不是瀏覽器加載頁面時設置的大小。因此，無論何時調整屏幕大小，min-width/max-width值也會改變（不確定這是否是您的問題，因爲該示例相當耗時），但是，您似乎在嘗試製作響應式設計，因此您應該使用媒體-queries。媒體查詢的示例代碼：

@media screen and (max-width: 1040px) and (min-width: 100px) { 
    #content { 
     width: 100%; 
    } 
}

這裏有一些資源，這將幫助您瞭解並使用它們：

CSS-Tricks
Spec
MDN

來源

2014-01-06 20:26:03

我想限制我調整大小divs到最大和最小寬度

回答

相關問題