Can't align DIVs left/center/right horizontally
Question
I have this HTML:
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="css/style1.css">
</head>
<body>
<div class="container">
<div class="left">
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
</div>
<div class="center">
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
</div>
<div class="right">
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
<a class="nolinea" href="test.html"><div class="grezzo"> Tunz-tunz-parapara-tunz</div></a><br>
</div>
</div>
</body>
</html>
And this CSS:
.grezzo{
-webkit-border-radius: 30px 30px 30px 30px;
-moz-border-radius: 30px 30px 30px 30px;
border-radius: 30px 30px 30px 30px;
width: 200px;
padding: 30px 30px 30px 30px;
background: grey;
text-align:center;
color: white;
box-shadow: 15px 15px 10px black;
transition: border-radius 2s, background 2s;
-moz-transition: -moz-border-radius 2s, background 2s;
-webkit-transition: -webkit-border-radius 2s, background 2s;
}
.grezzo:hover {
-webkit-border-radius: 40px 30px 40px 30px;
-moz-border-radius: 40px 30px 40px 30px;
border-radius: 40px 30px 40px 30px;
transition: border-radius 2s, background 2s;
-moz-transition: -moz-border-radius 2s, background 2s;
-webkit-transition: -webkit-border-radius 2s, background 2s;
background: darkblue;
}
.nolinea {
text-decoration: none;
}
.left{
float: left;
width: 500px;
}
.center{
margin:0 auto;
width: 100%;
}
.right{
float: right;
width: 500px;
}
.container{
width: 100%;
}
This is the like to jsfiddle .
My problem is: I want to have my 3 menus left/center/right, like a table, but not using it. How can I place them like this?
2 answers
solution1
1 ACCPTED 2013-01-20 18:57:00
You can either use the CSS display types for tables, or you can float all three menus (.left, .center, .right) left , setting suitable widths on them. You're mixing pixels widths and percentage widths, which is probably going to cause you problems, but if you do the following:
.left, .center, .right {
float: left;
width: 33%;
}
you'll at least see the beginnings of what you want. Because .grezzo is 200px wide, there's some overlap if you do it in jsfiddle . Without knowing your overall page layout it's difficult to advise whether this is actually a good solution for you or not.
solution2
0 2013-01-20 18:50:42
Give each div the same class eg .block then for css, add .block { display: inline-block; } .block { display: inline-block; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.