我的＆＃34;产品＆＃34;酒吧不应该在哪里。我试图将它放在左边的侧边栏附近。我不想要这么远的距离。
我有＆＃34;浮动：左＆＃34;。我无法使用左边或右边的边距向左移动它。
如果我有＆＃34;漂浮：正确＆＃34;，我可以这样做，但我不想要那样。
我想用＆＃34; float：left＆＃34;设置它。选项。
tast.html
<!DOCTYPE html>
<html>
<!-- START HEAD -->
<head>
<meta charset="utf-8">
<title>xPeke</title>
<link rel="stylesheet" href="test.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="icon" href="images/favicon-16x16.png" sizes="16x16" type="image/png">
</head>
<!-- END HEAD -->
<!-- START BODY -->
<body>
<div class="content">
<!-- START TOPBAR -->
<div id="program">
<b style="color:black;">Program:</b> Luni-Vineri: 9:00-22:00 Sambata: 9:00–20:00 Duminica: Inchis
<a href="#" style="float:right">Login <span> / </span> Register</a>
</div><br>
<!-- END TOPBAR -->
<!-- START SLIDESHOW -->
<div class="slideshow-container">
<img class="mySlides" src="images/logo1.png" alt="Logo1" width="1500" height="300">
<img class="mySlides" src="images/logo2.png" alt="Logo2" width="1500" height="300">
<img class="mySlides" src="images/logo3.png" alt="Logo3" width="1500" height="300">
<div class="butonpoza">
<button onclick="clearTimeout(timer)">Opreste Animatia</button>
<div class="dotts">
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
</div>
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a><br>
</div>
<!-- END SLIDESHOW -->
<!-- START LOGO, SEARCH & SOCIAL BAR -->
<div>
<img src="images/logo.png" alt="Logo" width="180" height="45" style="float:left">
<input class="search" type="text" name="search" placeholder="Search..">
<div style="float:right">
<a href="https://www.facebook.com/"><img class="socialmedia" src="images/facebook.png" alt="Facebook"></a>
<a href="https://www.youtube.com/"><img class="socialmedia" src="images/youtube.png" alt="Youtube"></a>
<a href="https://www.reddit.com/"><img class="socialmedia" src="images/reddit.png" alt="Reddit"></a>
</div>
</div>
<!-- END LOGO, SEARCH & SOCIAL BAR -->
<!-- START NAVIGATION BAR -->
<div style="float:left"><br>
<ul>
<li class="dropdown"><a class="active" href="#home">Produse</a>
<div class="dropdown-content">
<a href="#">Laptop, Telefoane & Tablete</a>
<a href="#">Televizoare & Desktop</a>
<a href="#">Tehnologii Smart</a>
<a href="#">Haine & Accesorii</a>
<a href="#">Anime & Manga</a>
<a href="#">Carti de Joc</a>
<a href="#">Jocuri & Jucarii</a>
</div>
</li>
<li><a href="#news">Articole</a></li>
<li><a href="#contact">Promotii</a></li>
<li><a href="#about">Wishlist</a></li>
<li><a href="#daaaa">FAQ</a></li>
<li style="padding: 0px 432.5px;"></li>
<li style="float:right"><a href="#daaaa">Cosul meu</a></li>
<li style="float:right"><a href="#daaaa">Contul meu</a></li>
</ul>
</div>
<!-- END NAVIGATION BAR -->
<!-- START SIDEBAR -->
<div style="float:left"><br>
<a href="#" class="da">Noutati</a>
<a href="#" class="da">Cele mai populare</a>
<a href="#" class="da">Cele mai vandute</a>
<a href="#" class="da">Precomenzi</a>
<a href="#" class="da">Oferte speciale</a>
<h3>Anunturi</h3>
<aside class="sidebar">
<section class="articles">
<article class="article clearfix">
<img class="article__image" src="images/art1.png" alt="Hello World!">
<div class="article__content">
<h3 class="article__title">Hello Everyone!</h3>
<p class="pby">posted by xPeke</p>
</div>
</article>
<article class="article clearfix">
<img class="article__image" src="images/art2.png" alt="Yu-Gi-Oh!">
<div class="article__content">
<h3 class="article__title">We've added the newest Yu-Gi-Oh cards.</h3>
<p class="pby">posted by Rekkles</p>
</div>
</article>
<article class="article clearfix">
<img class="article__image" src="images/art3.png" alt="iPhone">
<div class="article__content">
<h3 class="article__title">A aparut noul iphone 8.</h3>
<p class="pby">posted by Soaz</p>
</div>
</article>
</section>
</aside>
<form class="twentyone">
<fieldset>
<legend>Newsletter</legend><br>
<div>
Daca vrei sa afli ultimele promotii si noutați aboneaza-te la newsletter-ul Fnatic!
</div><br>
<div>
<input class="newslt" type="text" name="newslt" placeholder="Email">
</div><br>
<div>
<button class="fltrgt" type="submit">Aboneaza-te!</button>
</div>
</fieldset>
</form><br>
</div>
<!-- END SIDEBAR -->
<!-- START PRODUSE RECOMANDATE BAR -->
<div class="prodrec">
<h2> Products </h2>
<table>
<tr>
<td>
<div id="1" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="2" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="3" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
</tr>
<!-- Spatiu-->
<tr>
<td></td>
<td><br></td>
</tr>
<!-- pana aici-->
<tr>
<td>
<div id="4" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="5" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="6" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
</tr>
<!-- Spatiu-->
<tr>
<td></td>
<td><br></td>
</tr>
<!-- pana aici-->
<tr>
<td>
<div id="7" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="8" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
<td>
<div id="9" class="items">
<img src="img/products/robot1.jpg"/>
<span class="desc">Description</span>
<span class="price">$100</span>
<span class="other">Other</span>
<button>BUY</button>
</div>
</td>
</tr>
<!-- Spatiu-->
<tr>
<td></td>
<td><br></td>
</tr>
<!-- pana aici-->
</table>
</div>
<!-- END PRODUSE RECOMANDATE BAR -->
<div style="float:right">
<h1> RIGHT! </h1>
</div>
<!-- START SCRIPT ZONE -->
<script>
var slideIndex = 1;
var timer = null;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n==undefined){n = ++slideIndex}
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
timer = setTimeout(showSlides, 10000);
}
</script>
<!-- END SCRIPT ZONE -->
<!-- START FOOTER -->
<footer style="float:left">
<div class="skills">© Cat e facut din site pana acum: 60%</div>
</footer>
<!-- END FOOTER -->
</div>
</body>
<!-- END BODY -->
</html>
test.css
.prodrec{
float: left;
}
/* START BODY */
body{
background-image: url("images/bgd.png");
background-repeat: repeat;
}
.content {
max-width: 1500px;
margin: auto;
padding: 10px;
}
/* END BODY */
/* START TOPBAR */
#program{
font-size: 90%;
font-family: 'Oswald', sans-serif;
color: #2E2EFE;
font-style: normal;
font-weight: 700;
padding: 0;
border: 0;
text-transform: uppercase;
padding-bottom: 0;
}
a{
color: #2E2EFE;
text-decoration: none;
font-weight: 700;
}
/* END TOPBAR */
/* START SLIDESHOW */
.slideshow-container{
position: relative;
}
.mySlides{
display:none;
width:100%;
}
.butonpoza{
float: right;
margin-right: 10px;
margin-top: -30px;
position:relative;
}
/* END SLIDESHOW */
/* START SAGETI */
.prev, .next{
cursor: pointer;
position: absolute;
top: 50%;
width: 15px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 25px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
}
.next{
width: 15px;
right: 0px;
border-radius: 3px 0 0 3px;
}
.prev:hover, .next:hover{
background-color: rgba(0,0,0,0.8);
}
/* END SAGETI */
/* START DOTTS */
.dot{
cursor:pointer;
height: 17px;
width: 17px;
margin: 0 10px;
background-color: black;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover{
background-color: white;
}
.dotts{
text-align: center;
margin-left: -1362px;
margin-top: -20px;
}
/* END DOTTS */
/* START SEARCH AND SOCIAL BAR */
.search{
width: 10px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("images/search.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
margin-left: 32px;
width: 69%;
}
.socialmedia{
height: 50px;
width: 50px;
}
/* END SEARCH AND SOCIAL BAR */
/* START NAVIGATION BAR */
ul{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li{
float: left;
}
li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active){
background-color: #111;
}
.dropdown{
float: left;
overflow: hidden;
}
.dropdown .dropbtn{
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
}
.active{
background-color: #4CAF50;
}
.dropdown-content{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a{
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover:not(.active){
background-color: #ddd;
}
.dropdown:hover .dropdown-content{
display: block;
}
/* END NAVIGATION BAR */
/* START SIDEBAR */
.da{
display: block;
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.2);
background-color: #f9f9f9;
text-transform: uppercase;
box: 5px;
width: 250px;
border: 1px solid #555;
}
.da:hover:not(.active){
background-color: #fb2545;
}
.sidebar{
width: 50%;
float: left;
}
.sidebar .article__image{
float: left;
width: 35%;
}
.sidebar .article__content{
float: right;
width: 61%;
padding-left: 10px;
}
.sidebar .article__title{
display: block;
text-transform: uppercase !important;
line-height: 16px;
font-family: 'Oswald' !important;
}
.pby{
font-family: 'Play', sans-serif;
color: #995d08;
font-size: 13px;
}
.clearfix::after{
content: "";
display: table;
clear: both;
}
.twentyone{
display: block;
width: 50%;
}
.newslt{
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-color: white;
background-image: url("images/email.png");
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
width: 100%;
}
.fltrgt{
float: right;
}
/* END SIDEBAR */
/* START PRODUSE RECOMANDATE BAR */
tr{
display: block;
}
td{
display: inline-block;
}
.items{
display: inline-block;
text-align: center;
width: 180px;
margin: 0 7px 0 7px;
padding-top: 10px;
border: 1px solid #999;
border-radius: 20px;
}
.items img{
width: 160px;
height: 140px;
border: 1px solid rgba(207, 207, 207, .7);
}
.items button{
background: #666;
width: 80px;
height: 26px;
float: right;
border-top: 1px solid #999;
border-left: 1px solid #999;
border-right: none;
border-bottom: none;
outline: none;
cursor: pointer;
border-bottom-right-radius: 20px;
transition: background 0.2s ease-in;
}
.items button:hover{
background: #888;
}
.desc, .price, .other{
display: block;
margin-bottom: 10px;
}
/* END PRODUSE RECOMANDATE BAR */
/* START FOOTER */
footer{
height: 40px;
width: 60%;
text-align: center;
color: white;
background-color: #2196F3;
}
.skills{
text-align: right;
padding-right: 20px;
line-height: 40px;
color: white;
}
/* END FOOTER */
答案 0 :(得分：1)
您是否考虑过使用bootstrap来创建布局？这样的事情很容易。
请在此处查看：http://getbootstrap.com/examples/grid/
您可以在列中使用pull-right和pull-left来对齐您的内容，并使用text-right和text-left来查找文字。
我认为pull-right和pull-left已在Bootstrap 4中替换为float-right和float-left。
尝试使用bootstrap进行实验！
此网站还允许您使用布局http://www.bootply.com