如何实现左列宽度自适应设计_html/css

Jadual Kandungan

回复讨论(解决方案)

Rumah

hujung hadapan web

html tutorial

如何实现左列宽度自适应设计_html/css_WEB-ITnose

Jun 24, 2016 pm 12:20 PM

如何实现右列宽度固定左列宽度自适应设计

回复讨论(解决方案)

这里有一个jquery制作左边固定宽度右边自适应宽度的div，你要右边固定，就把右边改成左边就行，就是相换，http://www.ablanxue.com/prone_1761_1.html

看不懂jquery 有没有用div+css的啊

引用 2 楼 JQJ007 的回复:引用 1 楼 huanlin08 的回复:这里有一个jquery制作左边固定宽度右边自适应宽度的div，你要右边固定，就把右边改成左边就行，就是相换，http://www.ablanxue.com/prone_1761_1.html

看不懂jquery 有没有用div+css的啊
有啊，看这里：http://www.ab……

左边换右边达不到预期效果啊无法让右列固定左边自适应啊

帅哥，头像很有味道啊。
我感觉你可能需要的是这个：

http://bbs.blueidea.com/thread-2818595-1-1.html

.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title></title></head><body><div style="float:left; height:270px; border:1px solid #000; line-height:22px;">中国中国中国中国中国中国中国中国中国中国<br />中国中国中国中国中国中国中国中国中国中国</div><div style="float:left;width:115px; height:270px; border:1px solid #000;line-height:22px; overflow:hidden;">美国美国</div></body></html>

Salin selepas log masuk

.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
这个就够了。

.box{
position: relative;
}
.left{
margin-right: 200px;
background: yellow;
}
.right{
position: absolute;
top:0px;
right: 0px;
width: 200px;
background: red;
}
背景颜色只是为了看效果

<div class="right"></div><div class="left"></div><style type="text/css">.left{background:#ff0;height:400px;}.right{float:right;width:250px;background:#f00;height:400px;} </style>

Salin selepas log masuk

引用 7 楼 stongyann 的回复:

.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
这个就够了。
两列布局，一列浮动宽度固定，另一列宽度%自适应。也就个浮动知识点。

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas Tag

Kod&IT

Suara

Perniagaan

Pemasaran

Pengesan AI

Chatbot

Reka bentuk&Seni

Artikel Panas

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

3 minggu yang lalu By DDD

Repo: Cara menghidupkan semula rakan sepasukan

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: Cara mendapatkan biji gergasi

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

3 minggu yang lalu By 王林

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Tag artikel panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7129

Tutorial Java

1534

Tutorial Laravel

1256

Tutorial PHP

1205

Tutorial CakePHP

1153

Tunjukkan Lagi

Related knowledge

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi? Mar 04, 2025 pm 12:32 PM

Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna? Mar 17, 2025 pm 12:27 PM

Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?

Bagaimana cara menambah kesan strok kepada imej PNG di laman web? Mar 04, 2025 pm 02:39 PM

Bagaimana cara menambah kesan strok kepada imej PNG di laman web?

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya? Mar 18, 2025 pm 02:51 PM

Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?

Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat? Mar 12, 2025 pm 04:08 PM

Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5? Mar 17, 2025 pm 12:20 PM

Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik? Mar 12, 2025 pm 04:05 PM

Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?

See all articles