3 κυμαινόμενο divs με δυναμική πλάτος κέντρο

ψήφοι
3

Εντάξει, έτσι το πρόβλημά μου είναι ότι δεν μπορώ να πάρω το κέντρο div για να ορίσετε δυναμικά το πλάτος της με βάση το πλάτος του προγράμματος περιήγησης και εξακολουθεί να επιπλέει ανάμεσα στα δύο divs.

<style type=text/css>
#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;width:100%;float:left;}
#right{min-height:70px;width:60px;float:right;}
</style>
<div id=container>
    <div id=left>text</div>
    <div id=middle>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla enim eget augue pretium facilisis. Quisque euismod mauris eu odio tincidunt pharetra interdum enim dignissim. Phasellus eleifend viverra diam, et vestibulum orci feugiat vitae. Fusce rhoncus, dolor sit amet rhoncus pulvinar, elit libero tincidunt tortor, non elementum lacus nisl sit amet lorem.</div>
    <div id=right>text</div>
</div>
Δημοσιεύθηκε 09/08/2011 στις 15:58
πηγή χρήστη
Σε άλλες γλώσσες...                            


5 απαντήσεις

ψήφοι
2

Θα μπορούσατε να ορίσετε το πλάτος της μεσαίας div χρήση jQuery , ως εκ τούτου:

$('#middle').width($('#container').width()-120);

Επίδειξη εργασίας

Απαντήθηκε 09/08/2011 στις 16:03
πηγή χρήστη

ψήφοι
8

Θα μπορούσατε να δοκιμάσετε τη CSS σας σαν αυτό:

#container{width:100%;}
#left{min-height:70px;width:60px;float:left;}
#middle{min-height:70px;padding:0 60px}
#right{min-height:70px;width:60px;float:right;}

jsFiddle

Απαντήθηκε 09/08/2011 στις 16:05
πηγή χρήστη

ψήφοι
1

Δοκιμάστε το με κάποια ασήμαντα javascript: http://jsfiddle.net/maniator/SjMqU/

var middle = document.getElementById('middle');
var win_width = document.body.offsetWidth;
middle.style.width = (win_width - 140) + 'px';

Και αυτό το βιολί λειτουργεί σε παράθυρο αλλαγής μεγέθους: http://jsfiddle.net/maniator/SjMqU/4/

Απαντήθηκε 09/08/2011 στις 16:06
πηγή χρήστη

ψήφοι
0

Ο καλύτερος τρόπος για να γίνει αυτό θα ήταν να το βάλετε σε ένα τραπέζι, αλλά αν δεν θέλετε ότι ακριβώς κάνουν όλα τα divs συμπεριφέρονται σαν κελιά πίνακα:

<style type="text/css">
  div{display:table-cell;}
  #container{width:100%;}
  #left{min-width:60px;}
  #middle{min-width:50%;}
  #right{min-width:60px;}
</style>
.....
Απαντήθηκε 09/08/2011 στις 16:10
πηγή χρήστη

ψήφοι
0

Θα μπορούσατε να κάνετε κάτι σαν αυτό:

#container{width:100%;
}
#left, #middle, #right{min-height:70px; 
    display:inline-block;
    vertical-align:top;
}
#left{width:19%;
    background:red;
}
#middle{width:60%; 
    background:green;
}
#right{width:19%; 
    background:blue;
}

http://jsfiddle.net/jasongennaro/8BqP9/

Απαντήθηκε 09/08/2011 στις 16:11
πηγή χρήστη

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more