HTML將div對齊成一行

我一直在試圖將我的div組織成一行，但由於某些原因，CSS無法正常工作。該div被稱爲容器和塊。如果有人能幫我把他們放到一個很好的橫排上。HTML將div對齊成一行

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript"> 
var image1=new image() 
image1.src="theimage.png" 
var image2=new image() 
image2.src="soccerafrica.png" 
var image3=new image() 
image3.src="thatsall.png" 

</script> 
<style> 
li{ display:inline; 
margin: 5rem;} 
body{ 
    font-family: Verdana, Geneva, sans-serif; 
} 

ul { list-style-type: none; 
margin: 0px; 
padding: 0px; 
overflow: hidden; 
    } 
.container{overflow:hidden; color:white; display: inline-block;} 
.block{ width:20rem; height: 30rem;} 
</style> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Kinectricity</title> 
</head> 
<body style="background-color:#444444"> 
<h1 style="font-size:30px; background-color:#333333; margin:0px"> 
<center> 
<nav> 
    <div class="navi"> 
    <ul> 
    <li><a href="index.html"><img src="CornerLogo1.png"height="100"width="200"></a></li> 
    <li><a href="index.html"><img src="home.png"height="50"width="135"></a></li> 
    <li><a href="aboutkinectricity.html"><img src="about.png"height="50"width="151"></a></li> 
    <li><a href="contactkinectricity.html"><img src="contact.png"height="50"width="158"></a></li> 
    <li><a href="shopkinectricity.html"><img src="cart.png"height="50"width="65"></a></li> 
    </ul> 
    </div> 
</nav> 
</center> 
</h1> 

<center> 
<image style="border-left: 40px solid #333333; border-right:40px solid #333333; border-bottom:40px solid #333333"; border-top:none; id="ss" src="image.png" name="slideshow" alt="imageslideshow" height="525" width="1500"> 
<div id="rpt"></div> 
</center> 
<script> 
var numberImage = 0; 
var arr = ["image.png","image1.png","image2.png"]; 
$(function(){ 
    myslide(numberImage); 
}); 

function myslide(numberImage){ 
    $('#ss').attr('src', arr[numberImage]) 
    numberImage++; 
    if (numberImage>2) numberImage=0; 
    setTimeout(function(){myslide(numberImage)} ,5000); 
} 
</script> 
<h2 style="color:white;font-size:50px; font:'Avenir Next Regular';"><pre><u> What We Offer         </u></pre></h2> 
<div class="container"> 
<div class="block"> 
<img src="kball.jpeg" height="280rem" width="300rem"> 
<p><b>Kinetisphere Soccer Balls:</b> Kinectricity's soccer balls are unique - with pendulum technology, it store 3 hours of energy for every 30 minutes of play. Connect your device with the USB port to charge it or use it as a lamp. With its double use, you're saving electricity and helping the world.</p> 
</div> 
<div class="block"> 
<img src="skins.jpeg" height="280rem" width="300rem"> 
<p><b>Add Custom Skins: </b>Kinectricity offers the option of customization through our various soccer ball skins. Choose your favorite color or soccer team logo or send us your own design for additional cost.</p> 
</div> 
<div class="block"> 
<img src="africa.jpg" height="280rem" width="300rem"> 
<p><b>Donate: </b>Kinectricity's 1-for-1 program donates a soccer ball for each one sold to developing countries in need of electricity, through World Vision. Learn more about our charitable aspect and how you can help while getting a revolutionary Kinetisphere soccer ball.</p> 
</div> 
</div> 
<center> 
<p><iframe width="900" height="325" src="https://www.youtube.com/embed/paVygX5ghBE" frameborder="0" allowfullscreen></iframe></p> 
</center> 
</body> 

</html>

來源

2016-03-02 Joaquin

'已被棄用，不應再使用。 –

..另外，您可以在標題元素中放置一個div和一個「ul」。驗證您的HTML。 –

只需添加float:left;到.block類。像這樣

.block { 
    width: 20rem; 
    height: 30rem; 
    float:left; 
}

來源

2016-03-02 21:18:31

除了由DivakarDass的風格變化，你也應該包括在容器排clearfix CSS。

.container:before, .container:after { 
    content: " "; 
    display: table; 
}

來源

2016-03-02 21:52:14 Tish

HTML將div對齊成一行

回答

相關問題