简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > html教學 > 主體

一列div宽度固定、一列div宽度自适应_html/css_WEB-ITnose

WBOY
發布： 2016-06-24 11:31:23
原創
1199 人瀏覽過

一列固定、一列宽度自适应:
建议:尽可能的手写代码，可以有效的提高学习效率和深度。
之前的代码中，已经介绍过一列宽度自适应和二列宽度自适应，实现自适应的效果一般就是将相应对象的宽度以百分比的形式表示。在实际的布局中，一列宽度固定、一列宽度自适应。下面我们就以左侧div宽度固定，右侧div宽度是自适应为例。
代码实例:

<!DOCTYPE html><html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>蚂蚁部落</title> <style type="text/css">body{  margin:0px;  padding:0px;}.left{  width:200px;  height:50px;  background-color:green;  position:absolute;  left:0px;}.right{  height:50px;  background-color:blue;  margin-left:200px;}</style></head><body><div class="left">我是左边</div><div class="right">我是右边</div></body></html>
登入後複製

以上代码中左栏div宽度是固定值200px，并且将其进行绝对定位，这样它就脱离文档流了，不会对周围的div定位造成影响。这个时候设置右边div的左外边距等于左边div的宽度，且不设置此div的宽度以达到宽度自使用效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4767

更多内容可以参阅:http://www.softwhy.com/divcss/

相關標籤：
一列div宽度固定、一列div宽度自适应
來源：php.cn
上一篇：Error Domain=com.alamofire.error.serialization.response Code=-1016 "Request failed: unacceptable content-type: text/html" 的问题原因及解决方案_html/css_WEB-ITnose 下一篇：CSS如何实现段落首字符缩进两个字符效果_html/css_WEB-ITnose
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
重新的標題為：固定的div列和剩餘的寬度 我正在嘗試建立一個5列佈局，其中所有列的高度都是瀏覽器視窗的全高度。除了中間列之外，其他列應該是固定的，當滾動瀏覽器/文件時不會移動。中間列將包含網站內容，並且會垂直溢出，所以在瀏...
來自於 2023-09-14 17:17:47
0
1
299
HTML 輸入標記意外移動 CSS 網格線 為了簡化我的問題，假設我有一個2x2CSS網格div。我使用網格模板來調整這4個單元格中的3個div（類別名稱：「btn」、「title」和「info」），如下程式碼片段所示。 （...
來自於 2023-09-14 00:31:55
0
2
229
顯示 flex 佔用的寬度大於 div 上指定的寬度 div有一定的寬度，裡面的文字動態地來自API，並且有省略號樣式。我無法提供文字的寬度，因為文字是完全動態的並且不確定文字長度。下面是解釋該問題的程式碼。 body{backgro...
來自於 2023-09-11 18:37:38
0
1
304
是否有僅 CSS 的方法可以在特定的非空白字元上打斷單字？ 如果單字（例如THIS_PHRASE_HERE）溢出其內部的div（固定寬度），我想用底線分割它。我知道我可以使用word-break:break-all來分割任何字元上的單詞，但...
來自於 2023-09-10 20:24:04
0
2
280
如何設定 flex:auto 元素的子清單的寬度 您好，我有CSS問題。有兩列，右(B)列的固定寬度為100px，左(A)列必須填入剩餘寬度。另外，在A列內，有一個水平添加的子組件清單。問題是，當新增子元件時，A列的寬度變長，B列...
來自於 2023-09-09 18:09:18
0
2
242
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！