Table des matières
回复讨论(解决方案)
Maison interface Web tutoriel HTML 如何实现左列宽度自适应设计_html/css_WEB-ITnose

如何实现左列宽度自适应设计_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>
Copier après la connexion



.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>
Copier après la connexion

引用 7 楼 stongyann 的回复:



.left{margin:0 250px 0 0 ;width:100%;}
.right{float:right;width:25px;}
这个就够了。
两列布局,一列浮动宽度固定,另一列宽度%自适应。也就个浮动知识点。
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Article chaud

Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version? Mar 04, 2025 pm 12:32 PM

Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Comment ajouter efficacement les effets de course aux images PNG sur les pages Web? Mar 04, 2025 pm 02:39 PM

Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?

Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer? Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer? Mar 18, 2025 pm 02:51 PM

Quelles sont les implications de sécurité de l'utilisation des iframes et comment puis-je les atténuer?

Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage? Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage? Mar 12, 2025 pm 04:08 PM

Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?

Comment utiliser efficacement les liens HTML pour la navigation et le référencement? Comment utiliser efficacement les liens HTML pour la navigation et le référencement? Mar 18, 2025 pm 02:39 PM

Comment utiliser efficacement les liens HTML pour la navigation et le référencement?

See all articles