قم بتوسيع div إلى الحد الأقصى للعرض عند تعيين float:left
https://stackoverflow.com/questions/1017880
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي شيء من هذا القبيل:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
كلا العوامات ضرورية.أريد أن يملأ قسم المحتوى الشاشة بأكملها مطروحًا منها 100 بكسل للقائمة.إذا لم أستخدم float، فسيتم توسيع div تمامًا كما ينبغي.ولكن كيف يمكنني ضبط هذا عند ضبط التعويم؟إذا كنت تستخدم شيء مثل
style=width:100%
بعد ذلك، يحصل قسم المحتوى على حجم العنصر الأصلي، والذي يكون إما النص الأساسي أو div آخر والذي جربته أيضًا، وبالتالي فهو بالطبع لا يتناسب مع القائمة مباشرةً ثم يتم عرضه أدناه.
المحلول
أتمنى أن أكون قد فهمتك بشكل صحيح، ألقِ نظرة على هذا: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>نصائح أخرى
والطريقة الأكثر عبر متوافق لقد وجدت للقيام بذلك ليست واضحة جدا. تحتاج إلى إزالة تعويم من العمود الثاني، وتطبيق overflow:hidden إليها. على الرغم من أن هذا من شأنه أن يبدو أن إخفاء أي محتوى الذي يذهب خارج شعبة، فإنه في الواقع يفرض على شعبة للبقاء ضمن الأم.
<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>
وهذا الأمل من المفيد أن أي شخص وجود هذه المسألة، هو ما وجدته يعمل أفضل للموقع كنت بناء، بعد محاولة لحملها على التكيف مع قرارات أخرى. لسوء الحظ، فإن هذا لا للعمل إذا قمت بتضمين div طرحت بزر الماوس الأيمن بعد المحتوى أيضا، إذا كان أي شخص يعرف وسيلة جيدة للحصول على هذا للعمل، مع حسن التوافق IE، وسأكون سعيدا جدا لسماع ذلك.
جديد، الخيار الأفضل استخدام display: flex;
والآن وبعد أن نموذج حول flexbox وإلى حد ما نفذت على نطاق واسع، وأنا أنصح فعلا استخدامه بدلا من ذلك، لأنه يسمح أكثر من ذلك بكثير flexibility مع تخطيط. وهنا بسيط عمودين مثل الأصلي:
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex: 1;">content</div>
</div>
وهنا هو عمود ثلاثة مع مركز العمود مرونة العرض!
<div style="display: flex;">
<div style="width: 100px;">menu</div>
<div style="flex:1;">content</div>
<div style="width: 100px;">sidebar</div>
</div>
الحل دون حجم التلاعب على الهامش
.content .right{
overflow: auto;
background-color: red;
}
و+1 لMerkuro، ولكن إذا كان حجم تعويم يتغير ستفشل هامش ثابت الخاص بك.
إذا ش استخدام أعلى CSS على div الحق فإنه سيتم تغيير لطيف الحجم مع تغيير الحجم على تعويم الأيسر. أنها قليلا اكثر مرونة من هذا القبيل.
افحص كمان هنا: http://jsfiddle.net/9ZHBK/144/
وعناصر التي طرحت واتخاذها للخروج من تخطيط التدفق الطبيعي، وعناصر كتلة، مثل لDIV، لم يعد تمتد عرض والدهم. تغيير القواعد في هذه الحالة. بدلا من إعادة اختراع العجلة، وتحقق من هذا الموقع لبعض الحلول الممكنة لإنشاء تخطيط عمودين كنت بعد: <لأ href = "http://www.maxdesign.com.au/presentation/page_layouts/" يختلط = "noreferrer "> http://www.maxdesign.com.au/presentation/page_layouts/
وعلى وجه التحديد، "تخطيط السائل اثنين من العمود".
وهتاف!
هذا هو الحل محدثة لHTML 5 إذا كان أي شخص مهتم وليس مولعا "عائم".
والجدول يعمل كبيرة في هذه الحالة كما يمكنك ضبط عرض ثابت الى طاولة المفاوضات وجدول خلايا.
.content-container{
display: table;
width: 300px;
}
.content .right{
display: table-cell;
background-color:green;
width: 100px;
}
http://jsfiddle.net/EAEKc/596/ كود المصدر الأصلي منmerkuro
وهذا الاستخدام قد يحل مشكلتك.
width: calc(100% - 100px);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
float: left;
width: calc(100% - 100px);
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>
وعلى أساس حل merkuro، وإذا كنت ترغب في تحقيق أقصى قدر من واحد على اليسار، يجب عليك استخدام:
<!DOCTYPE html>
<html lang="en">
<head>
<meta "charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
margin-right: 100px;
background-color: green;
}
.content .right {
float: right;
width: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
<div class="left">
<p>Hi, Flo!</p>
</div>
</div>
</body>
</html>
ولم يتم اختباره على IE، لذلك قد تبدو كسر في IE.
والجواب المقبول قد عمل، ولكن أنا لا أحب فكرة تداخل الهوامش. في HTML5، يمكنك أن تفعل هذا مع display: flex;. انها حل نظيفة. مجرد تعيين عرض لعنصر واحد وflex-grow: 1; للعنصر ديناميكي. نسخة منقحة من merkuros كمان: https://jsfiddle.net/EAEKc/1499/
ومرحبا هناك طريقة سهلة مع تجاوز أسلوب مخفي على العنصر الصحيح.
.content .left {
float:left;
width:100px;
background-color:green;
}
.content .right {
overflow: hidden;
background-color:red;
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Content Menu</title>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo! I am Left</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
<p> It done with overflow hidden and result is same.</p>
</div>
</div>
</body>
</html>
وهذا قد عمل:
div{
display:inline-block;
width:100%;
float:left;
}
