Kayan bir div, maksimum alan kaplamak için dinamik olarak genişletmeyi nasıl yapabilirim?

Sol tarafta 3 adet sol nesneye sahibim, soldaki her zaman boyut olarak değişecektir. Hakkı her zaman boyut olarak sabitlenecektir. İki dış div arasındaki boşluğu doldurmak istediğim merkez. Şu an bu işe yaramıyor. Merkez div genişliğini% 100 olarak ayarlarsanız çok büyük olur. Bunun nasıl ele alınacağından emin değilsiniz.Kayan bir div, maksimum alan kaplamak için dinamik olarak genişletmeyi nasıl yapabilirim?

düzenleme: kod örneği

<div style="width:1000px"> 
    <div style="float:left;">1</div> 
    <div style="float:left;">Lots of text in here that can be any size....</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

ilk div boyutunda dinamiktir. Sayı 10 ise, sayı 1'den daha fazla yer kaplayacak. İkinci div da dinamik olacak, ben de birinci ve üçüncü div tarafından herhangi bir alanın alınmadığı bir yer almak istiyorum.

kaynak

2011-05-30 John Baker

Örnek kod lütfen. – Niklas

HTML

<div style="width:1000px"> 
    <div id="left">1</div> 
    <div id="right">Date/Time</div> 
    <div id="center">Lots of text in here that can be any size....</div> 
</div>

CSS

#left { 
    float: left; 
    width: 20%; 
} 

#center { 
    margin-left: 20%; 
    margin-right: 100px; 
} 

#right { 
    float: right; 
    width: 100px; 
}

fiddle bakınız.

kaynak

2011-05-30 18:54:07 melhosseiny

Bu durumda margin-left aslında işe yaramaz gibi görünmüyor, en azından bana bağladığınız kemanın bir marjı yok –

Nasıl çalışmıyor? – melhosseiny

Çalışıyorsa, iki renk arasında bir boşluk olacak mı? Gönderdiğin kemanda, her bir öğeyi bir masada sanki yan yana görüyorum. –

bu deneyin:

<!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" xml:lang="en" lang="en"> 
<head> 
    <title>How do I make a floating div dynamically expand to take up maximum space?</title> 
    <style type="text/css"> 
    #left { 
     float:left; 
     border:1px solid red; 
    } 
    #right { 
     float:right; 
     border:1px solid green; 
     width:100px; 
    } 
    #center { 
     overflow-x:hidden; 
     border:1px solid blue; 
    } 
    </style> 
</head> 
<body> 

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1> 

    <div id="left"> 
    Un-fixed width left, whose content may change. 
    </div> 
    <div id="right"> 
    Fixed WIdth Right column which shouldn't expand. 
    </div> 
    <div id="center"> 
    The center content<br />Which should expand as necessary 
    </div> 

</body> 
</html>

kaynak

2011-05-30 18:50:14

Muhtemelen bunu uzun zaman önce buldunuz, ancak sıradaki adam için bunu şimdi CSS3 flexbox ile yapabilirsiniz. (W3c's newest specification, Mozilla documentation, css-tricks)

HTML İşte

<div class="flex-container"> 
    <div>1</div> 
    <div class="expandable">Lots of text in here</div> 
    <div style="float:left; width:100px;">Date/Time</div> 
</div>

CSS

.flex-container { 
    display: flex; 
    width: 1000px; 
    border: 1px solid black; 
} 
.expandable { 
    flex: 100 100; 
    text-align: center; 
}

jsfiddle olduğunu.

kaynak

2015-04-23 12:16:49 slushy

Kayan bir div, maksimum alan kaplamak için dinamik olarak genişletmeyi nasıl yapabilirim?

cevap

İlgili konular