سؤال

لدي قسمين:واحد في الجانب الأيسر والآخر في الجانب الأيمن من صفحتي.الجزء الموجود على الجانب الأيسر له عرض ثابت وأريد أن يملأ الجانب الأيمن المساحة المتبقية.

    #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #ffffff;
    }
    #navigation {
        width: 780px;
        float: left;  
        background-color: #A53030;
    }
<div id="search">Text</div>
<div id="navigation">Navigation</div>

هل كانت مفيدة؟

المحلول

ويبدو أن هذا إنجاز ما كنت تريد الذهاب ل.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}
<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>

نصائح أخرى

المشكلة التي وجدتها في إجابة بوشلي هي أنه إذا كان العمود الأيمن أطول من العمود الأيسر فسوف يلتف حول اليسار ويستأنف ملء المساحة بأكملها.هذا ليس السلوك الذي كنت أبحث عنه.بعد البحث في الكثير من "الحلول" وجدت هذا برنامج تعليمي رائع على إنشاء ثلاث صفحات أعمدة.

يقدم المؤلف ثلاث طرق مختلفة، واحدة ذات عرض ثابت، وواحدة بثلاثة أعمدة متغيرة وواحدة ذات أعمدة خارجية ثابتة ووسط متغير العرض.أكثر أناقة وفعالية من الأمثلة الأخرى التي وجدتها.لقد تحسن فهمي لتخطيط CSS بشكل كبير.

بشكل أساسي، في الحالة البسيطة أعلاه، قم بتعويم العمود الأول على اليسار ومنحه عرضًا ثابتًا.ثم قم بإعطاء العمود الموجود على اليمين هامشًا يسارًا أوسع قليلاً من العمود الأول.هذا كل شيء.منتهي.كود علاء بوشلي:

هنا عرض توضيحي في قصاصات المكدس & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}
<div id="left">  left  </div>
<div id="right"> right </div>

في مثال بوشلي، يحمل العمود الأيسر العمود الآخر إلى اليمين.بمجرد انتهاء العمود الأيسر، يبدأ العمود الأيمن بملء المساحة بأكملها مرة أخرى.هنا يتم محاذاة العمود الأيمن بشكل أكبر داخل الصفحة ويحتل العمود الأيسر هامشًا كبيرًا منه.لا حاجة لتفاعلات التدفق.

والحل يأتي من خاصية العرض.

وفي الأساس تحتاج إلى جعل عناصر div اثنين تتصرف مثل خلايا الجدول. وذلك بدلا من استخدام float:left، سيكون لديك لاستخدام display:table-cell على كل عناصر div، وبالنسبة للشعبة عرض ديناميكية تحتاج إلى تعيين width:auto; أيضا. يجب وضع عناصر div كلا في وعاء عرض 100٪ مع الخاصية display:table.

وهنا هو المغلق:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

وفي HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

وهام: لإنترنت إكسبلورر تحتاج إلى تحديد الملكية تطفو على شعبة العرض الديناميكي، وإلا لن يتم ملأ الفضاء

.

وآمل أن يكون هذا حل مشكلتك. إذا كنت تريد، يمكنك قراءة المقال كاملا كتبت حول هذا الموضوع على <لأ href = "http://mihaifrentiu.com/how-to-fill-the-available-space-when-using-floated-divs" يختلط = "noreferrer"> بلدي بلوق .

وبما أن هذا هو سؤال شائع إلى حد ما، وأنا أميل لتبادل حل لطيفة باستخدام BFC.
Codepen عينة من هنا .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

في هذه الحالة، overflow: auto يطلق السلوك السياق ويجعل العنصر الصحيح توسيع <م> فقط إلى عرض المتبقية المتاحة وانه سيوسع بطبيعة الحال إلى العرض الكامل إذا يختفي .left. خدعة مفيدة للغاية ونظيفة للعديد من تصاميم واجهة المستخدم، ولكن ربما من الصعب أن نفهم "لماذا كان يعمل" في البداية.

وهذه الأيام، يجب عليك استخدام أسلوب flexbox (يمكن تكييفها لجميع المتصفحات مع بادئة المتصفح).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

ومزيد من المعلومات: https://css-tricks.com/ قصاصات / المغلق / أ-دليل-حول flexbox /

إذا كنت لا تحتاج إلى التوافق مع الإصدارات القديمة من بعض المتصفحات (IE <س> 10 8 أو أقل على سبيل المثال)، يمكنك استخدام وظيفة calc() CSS:

#left {
   float:left;
   width:180px;
   background-color:#ff0000;
}

#right {
   float: left;
   width: calc(100% - 180px);
   background-color:#00FF00;
}

@ كانت إجابة بوشلي هي الأقرب، ولكن هناك مشكلة واحدة لم تتم معالجتها وقد تمت الإشارة إليها.ال يمين يأخذ div العرض الكامل للمتصفح؛يأخذ المحتوى العرض المتوقع.لرؤية هذه المشكلة بشكل أفضل:

<html>
<head>
    <style type="text/css">
    * { margin: 0; padding: 0; }
    body {
        height: 100%;
    }
    #left {
        opacity: 0;
        height: inherit;
        float: left;
        width: 180px;
        background: green;
    }
    #right {
        height: inherit;
        background: orange;
    }
    table {
            width: 100%;
            background: red;
    }
    </style>
</head>
<body>
    <div id="left">
        <p>Left</p>
    </div>
    <div id="right">
        <table><tr><td>Hello, World!</td></tr></table>
    </div>
</body>
</html>

http://jsfiddle.net/79hpS/

المحتوى موجود في المكان الصحيح (في Firefox)، إلا أن العرض غير صحيح.عندما تبدأ العناصر الفرعية في وراثة العرض (على سبيل المثالالطاولة مع width: 100%) يتم إعطاؤها عرضًا مساوٍ لعرض المتصفح مما يؤدي إلى تجاوزها على يمين الصفحة وإنشاء شريط تمرير أفقي (في Firefox) أو عدم تعويمها ودفعها لأسفل (في Chrome).

أنت تستطيع اصلح هذا بسهولة عن طريق الإضافة overflow: hidden إلى العمود الأيمن.يمنحك هذا العرض الصحيح لكل من المحتوى وdiv.علاوة على ذلك، سيحصل الجدول على العرض الصحيح ويملأ العرض المتبقي المتاح.

لقد قمت بتجربة بعض الحلول الأخرى المذكورة أعلاه، ولكنها لم تعمل بشكل كامل مع بعض حالات الحافة وكانت معقدة للغاية بحيث لا تسمح بإصلاحها.هذا يعمل وهو بسيط.

إذا كانت هناك أية مشاكل أو مخاوف، فلا تتردد في طرحها.

وهنا هو الإصلاح القليل عن حل مقبول، مما يمنع العمود الأيمن من الوقوع تحت العمود الأيسر. استبدال width: 100%; مع overflow: hidden; حل صعبة، إذا كان شخص ما لا يعرفون ذلك.

<html>

<head>
    <title>This is My Page's Title</title>
    <style type="text/css">
        #left {
            float: left;
            width: 180px;
            background-color: #ff0000;
        }
        #right {
            overflow: hidden;
            background-color: #00FF00;
        }
    </style>
</head>

<body>
    <div>
        <div id="left">
            left
        </div>
        <div id="right">


right
    </div>
</div>

http://jsfiddle.net/MHeqG/2600/

[عدل] تحقق أيضا مثالا لمدة ثلاثة تخطيط العمود:   http://jsfiddle.net/MHeqG/3148/

استخدم display:flex

<div style="width:500px; display:flex">
   <div style="width:150px; height:30px; background:red">fixed width</div>

   <div style="width:100%; height:30px; background:green">remaining</div>
</div>

والجواب Boushley ويبدو أن أفضل طريقة للذهاب لترتيب ذلك باستخدام عوامات. ومع ذلك، فإنه لا يخلو من مشاكلها. تداخل سوف تطفو داخل عنصر موسع لن تكون متاحة لك؛ وسوف كسر الصفحة.

وتقوم الطريقة الموضحة في الأساس "مزيفة أنه" عندما يتعلق الأمر إلى العنصر توسيع - أنها ليست عائمة في الواقع، انها مجرد لعب جنبا إلى جنب مع عرض ثابت طرحت العناصر باستخدام هوامشها

وثم المشكلة هو بالضبط ما يلي: لم يتم طرح العنصر التوسع. إذا حاولت ولديك أي العائمة متداخلة داخل عنصر التوسع، وتلك "متداخلة" تعويم ليست متداخلة العناصر حقا على الإطلاق؛ عند محاولة عصا clear: both; في ظل قيادتكم "متداخلة" تعويم العناصر، فسوف ينتهي تطهير المستوى الأعلى يطفو كذلك.

وبعد ذلك، لاستخدام الحل Boushley، وأود أن أضيف أن من المفروض أن تضع شعبة من قبيل ما يلي:     .fakeFloat     {        الطول: 100٪؛        عرض: 100٪؛        تعويم: اليسار؛     } ووضع هذا مباشرة داخل شعبة الموسعة؛ يجب على جميع محتويات شعبة موسعة ليذهب بعد ذلك ضمن هذا العنصر fakeFloat.

لهذا السبب، أنصح باستخدام الجداول في هذه الحالة المحددة. عناصر طرحت حقا ليست مصممة للقيام التوسع التي ترغب، في حين أن الحل باستخدام جدول تافهة. يتم حجة عموما أن العائمة هو أكثر مناسبة لتخطيطات، وليس الجداول .. ولكن لا تستخدمها العائمة هنا على أي حال، كنت تزوير - وهذا النوع من الهزائم الغرض من حجة الأسلوبية لهذه الحالة المحددة، في رأيي المتواضع.

وحاولت الحلول المذكورة أعلاه للحصول على اليسار السائل، والحق ثابت ولكن غير منهم عمل (وأنا أدرك أن السؤال هو لعكس ولكن أعتقد أن هذا هو ذات الصلة). وهنا ما فعلته العمل:

.wrapper {margin-right:150px;}
.wrapper .left {float:left; width:100%; margin-right:-150px;}

.right {float:right; width:150px;}

<div class="wrapper"><div class="left"></div></div>
<div class="right"></div>

وكان لي مشكلة مماثلة، ولقد وجدت الحل هنا: https://stackoverflow.com/a/16909141/3934886

والحل هو لشعبة مركز ثابت والأعمدة الجانبية السائلة.

.center{
    background:#ddd;
    width: 500px;
    float:left;
}

.left{
    background:#999;
    width: calc(50% - 250px);
    float:left;
}

.right{
    background:#999;
    width: calc(50% - 250px);
    float:right;
}

إذا كنت ترغب في العمود الأيسر ثابتة، فقط تغيير الصيغة وفقا لذلك.

إذا كنت تحاول ملء المساحة المتبقية في حول flexbox بين 2 البنود، إضافة الطبقة التالية للشعبة فارغة بين 2 تريد فصل:

.fill {
  // This fills the remaining space, by using flexbox. 
  flex: 1 1 auto;
}

ويمكنك استخدام خصائص CSS الشبكة، هو الأكثر واضحة ونظيفة وبديهية هيكل طريقة المربعات الخاصة بك.

#container{
    display: grid;
    grid-template-columns: 100px auto;
    color:white;
}
#fixed{
  background: red;
  grid-column: 1;
}
#remaining{
  background: green;
  grid-column: 2;
}
<div id="container">
  <div id="fixed">Fixed</div>
  <div id="remaining">Remaining</div>
</div>

وأتساءل أن لا أحد يستخدم position: absolute مع position: relative

إذن الحل الآخر سيكون:

لغة البرمجة

<header>
  <div id="left"><input type="text"></div>
  <div id="right">Menu1 Menu2 Menu3</div>
</header>

CSS

header { position: relative;  }
#left {
    width: 160px;
    height: 25px;
}
#right {
    position: absolute;
    top: 0px;
    left: 160px;
    right: 0px;
    height: 25px;
}

مثال Jsfiddle

/ *  * المغلق  * /

#search {
 position: absolute;
 width: 100px;
}
.right-wrapper {
  display: table;
  width: 100%;
  padding-left:100px;
}
.right-wrapper #navigation {
 display: table-cell;
 background-color: #A53030;
}

/ *  * أتش تي أم أل  * /

<div id="search"></div>
<div class="right-wrapper">
   <div id="navigation"></div>
</div>

ولدي حل بسيط جدا لهذا! // HTML

<div>
<div id="left">
    left
</div>
<div id="right">
    right
</div>

و// CSS

#left {
float:left;
width:50%;
position:relative;
background-color:red;
}
#right {
position:relative;
background-color:#00FF00;}

الرابط: http://jsfiddle.net/MHeqG/

وكان لي مشكلة مشابهة وخرجت بما يلي التي عملت بشكل جيد

وCSS:

.top {
width: auto;
height: 100px;
background-color: black;
border: solid 2px purple;
overflow: hidden;
}
.left {
float:left;
width:100px;
background-color:#ff0000;
padding: 10px;
border: solid 2px black;
}
.right {
width: auto;
background-color:#00FF00;
padding: 10px;
border: solid 2px orange;
overflow: hidden;
}
.content {
margin: auto;
width: 300px;
min-height: 300px;
padding: 10px;
border: dotted 2px gray;
}

وHTML:

<div class=top>top </div>
<div>
    <div class="left">left </div>
    <div class="right">
        <div class="content">right </div>
    </div>
</div>

وهذه الطريقة سوف لا التفاف عندما تقلصت الإطار ولكن سوف السيارات توسيع منطقة "المحتوى". أنها سوف تبقي على عرض ثابت للقائمة موقع (يسار).

ولصناعة السيارات مربع المحتوى ومربع الرأسي الأيسر (القائمة الموقع) توسيع العرض:

https://jsfiddle.net/tidan/332a6qte/

وحاول إضافة موقف relative، وإزالة width وfloat خصائص الجانب الأيمن، ثم يضاف left والممتلكات right مع قيمة 0.

وبالإضافة إلى ذلك، يمكنك إضافة قاعدة margin left مع يستند القيمة على عرض العنصر الأيسر ل<م> (+ بعض بكسل اذا كنت بحاجة الى الفضاء بين) للحفاظ على مكانتها.

ويعمل هذا المثال بالنسبة لي:

   #search {
        width: 160px;
        height: 25px;
        float: left;
        background-color: #FFF;
    }

    #navigation {  
        display: block;  
        position: relative;
        left: 0;
        right: 0;
        margin: 0 0 0 166px;             
        background-color: #A53030;
    }

.container {
  width:100%;
  display:table;
  vertical-align:middle;
}

.left {
  width:100%;
  display:table-cell;
  text-align:center;
}

.right {
  width:40px;
  height:40px;
  display:table-cell;
  float:right;
}
<div class="container">
  <div class="left">Left</div>
  <div class="right">Right</div>
</div

وجرب هذا. لأنها عملت لي.

لقد كنت أعمل على حل هذه المشكلة لمدة يومين ولدي حل قد يناسبك أنت وأي شخص آخر يحاول إنشاء عرض ثابت سريع الاستجابة على اليسار وجعل الجانب الأيمن يملأ الجزء المتبقي من الشاشة دون الالتفاف حول الجانب الأيسر.القصد الذي أفترضه هو جعل الصفحة تستجيب للمتصفحات وكذلك الأجهزة المحمولة.

هنا هو الكود

// Fix the width of the right side to cover the screen when resized
$thePageRefreshed = true;
// The delay time below is needed to insure that the resize happens after the window resize event fires
// In addition the show() helps.  Without this delay the right div may go off screen when browser is refreshed 
setTimeout(function(){
    fixRightSideWidth();
    $('.right_content_container').show(600);
}, 50);

// Capture the window resize event (only fires when you resize the browser).
$( window ).resize(function() {
    fixRightSideWidth();
});

function fixRightSideWidth(){
    $blockWrap = 300; // Point at which you allow the right div to drop below the top div
    $normalRightResize = $( window ).width() - $('.left_navigator_items').width() - 20; // The -20 forces the right block to fall below the left
    if( ($normalRightResize >= $blockWrap) || $thePageRefreshed == true ){
        $('.right_content_container').width( $normalRightResize );
        $('.right_content_container').css("padding-left","0px");
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    
    }
    else{
        if( $('.right_content_container').width() > 300 ){
            $('.right_content_container').width(300);
        }
        
        /* Begin test lines these can be deleted */
        $rightrightPosition = $('.right_content_container').css("right");
        $rightleftPosition = $('.right_content_container').css("left");
        $rightwidthPosition = $('.right_content_container').css("width");
        $(".top_title").html('window width: '+$( window ).width()+"&nbsp;"+'width: '+$rightwidthPosition+"&nbsp;"+'right: '+$rightrightPosition);
        /* End test lines these can be deleted */
    
    }
    if( $thePageRefreshed == true ){
        $thePageRefreshed = false;
    }
}
/* NOTE: The html and body settings are needed for full functionality
and they are ignored by jsfiddle so create this exapmle on your web site
*/
html {
    min-width: 310px;
    background: #333;
    min-height:100vh;
}

body{
	background: #333;
	background-color: #333;
	color: white;
    min-height:100vh;
}

.top_title{
  background-color: blue;
  text-align: center;
}

.bottom_content{
	border: 0px;
	height: 100%;
}

.left_right_container * {
    position: relative;
    margin: 0px;
    padding: 0px;
    background: #333 !important;
    background-color: #333 !important;
    display:inline-block;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
    border-radius: 0;
    box-sizing: content-box;
    transition: none;
}

.left_navigator_item{
	display:inline-block;
	margin-right: 5px;
	margin-bottom: 0px !important;
	width: 100%;
	min-height: 20px !important;
	text-align:center !important;
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
	vertical-align: top;
}

.left_navigator_items {
    float: left;
    width: 150px;
}

.right_content_container{
    float: right;
    overflow: visible!important;
    width:95%; /* width don't matter jqoery overwrites on refresh */
    display:none;
    right:0px;
}

.span_text{
	background: #eee !important;
	background-color: #eee !important;
	color: black !important;
	padding: 5px;
	margin: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="top_title">Test Title</div>
<div class="bottom_content">
    <div class="left_right_container">
        <div class="left_navigator_items">
            <div class="left_navigator_item">Dashboard</div>
            <div class="left_navigator_item">Calendar</div>
            <div class="left_navigator_item">Calendar Validator</div>
            <div class="left_navigator_item">Bulletin Board Slide Editor</div>
            <div class="left_navigator_item">Bulletin Board Slide Show (Live)</div>
            <div class="left_navigator_item">TV Guide</div>
        </div>
        <div class="right_content_container">
            <div class="span_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper maximus tellus a commodo. Fusce posuere at nisi in venenatis. Sed posuere dui sapien, sit amet facilisis purus maximus sit amet. Proin luctus lectus nec rutrum accumsan. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut fermentum lectus consectetur sapien tempus molestie. Donec bibendum pulvinar purus, ac aliquet est commodo sit amet. Duis vel euismod mauris, eu congue ex. In vel arcu vel sem lobortis posuere. Cras in nisi nec urna blandit porta at et nunc. Morbi laoreet consectetur odio ultricies ullamcorper. Suspendisse potenti. Nulla facilisi.

Quisque cursus lobortis molestie. Aliquam ut scelerisque leo. Integer sed sodales lectus, eget varius odio. Nullam nec dapibus lorem. Aenean a mattis velit, ut porta nunc. Phasellus aliquam volutpat molestie. Aliquam tristique purus neque, vitae interdum ante aliquam ut.

Pellentesque quis finibus velit. Fusce ac pulvinar est, in placerat sem. Suspendisse nec nunc id nunc vestibulum hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris id lectus dapibus, tempor nunc non, bibendum nisl. Proin euismod, erat nec aliquet mollis, erat metus convallis nulla, eu tincidunt eros erat a lectus. Vivamus sed mattis neque. In vitae pellentesque mauris. Ut aliquet auctor vulputate. Duis eleifend tincidunt gravida. Sed tincidunt blandit tempor.

Duis pharetra, elit id aliquam placerat, nunc arcu interdum neque, ac luctus odio felis vitae magna. Curabitur commodo finibus suscipit. Maecenas ut risus eget nisl vehicula feugiat. Sed sed bibendum justo. Curabitur in laoreet dolor. Suspendisse eget ligula ac neque ullamcorper blandit. Phasellus sit amet ultricies tellus.

In fringilla, augue sed fringilla accumsan, orci eros laoreet urna, vel aliquam ex nulla in eros. Quisque aliquet nisl et scelerisque vehicula. Curabitur facilisis, nisi non maximus facilisis, augue erat gravida nunc, in tempus massa diam id dolor. Suspendisse dapibus leo vel pretium ultrices. Sed finibus dolor est, sit amet pharetra quam dapibus fermentum. Ut nec risus pharetra, convallis nisl nec, tempor nisl. Vivamus sit amet quam quis dolor dapibus maximus. Suspendisse accumsan sagittis ligula, ut ultricies nisi feugiat pretium. Cras aliquam velit eu venenatis accumsan. Integer imperdiet, eros sit amet dignissim volutpat, tortor enim varius turpis, vel viverra ante mauris at felis. Mauris sed accumsan sapien. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut vel magna commodo, facilisis turpis eu, semper mi. Nulla massa risus, bibendum a magna molestie, gravida maximus nunc.</div>
        </div>
    </div>
</div>

هذا هو كماني الذي قد يعمل من أجلك كما كان من أجلي.https://jsfiddle.net/Larry_Robertson/62LLjapm/

وأتش تي أم أل عنصر الجدول يجعل هذا افتراضيا ... أنت تحدد عرض الجدول ثم الأعمدة سوف تمتد دائما عرض الجدول بأكمله. والباقي هو حول الخيال

قواعد العناصر والحاويات.

Container: {*** display: table; ***}
Items: {*** display: table-cell; width: 100%; ***}

يستخدم المساحة البيضاء:norap; للنصوص في العناصر الأخيرة لعدم هيكلتها.

البند × ٪ | البند y ٪ | البند Z ٪

الطول الإجمالي دائمًا = 100%!

لو

Item X=50%
Item Y=10%
Item z=20%

ثم

العنصر العاشر = 70%

العنصر X هو المهيمن (العناصر الأولى هي السائدة في تخطيط CSS للجدول)!

يحاول الحد الأقصى للمحتوى؛ خاصية div بالداخل لنشر div في الحاوية:

div[class="item"] {
...
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
...

}

وأنا واجهت نفس المشكلة في محاولة لتخطيط بعض jqueryUI الضوابط. على الرغم من أن فلسفة مشتركة الآن "استخدام DIV بدلا من TABLE"، وجدت في حالتي باستخدام الجدول عملت أفضل بكثير. على وجه الخصوص، إذا كنت بحاجة إلى محاذاة مباشرة داخل العنصرين (على سبيل المثال، تمركز العمودي، توسيط أفقي، الخ) الخيارات المتاحة مع الجدول تعطي بسيطة، وضوابط بديهية لذلك.

وهنا بلدي الحل:

<html>
<head>
  <title>Sample solution for fixed left, variable right layout</title>
  <style type="text/css">
    #controls {
      width: 100%;
    }
    #RightSide {
      background-color:green;
    }
  </style>
</head>

<body>
<div id="controls">
  <table border="0" cellspacing="2" cellpadding="0">
    <TR>
      <TD>
        <button>
FixedWidth
        </button>
      </TD>
      <TD width="99%" ALIGN="CENTER">
        <div id="RightSide">Right</div>
      </TD>
    </TR>
  </table>
</div>
</body>
</html>

وجديدة لالمغلق. لكنني حل هذه المشكلة عن طريق استخدام مضمنة كتلة. التحقق من ذلك: http://learnlayout.com/inline-block.html

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top