侧边栏将主要内容向下推

Question

我似乎不知道如何将我的侧边栏向左浮动，将我的主要内容向右浮动。

我所做的一切似乎都将主内容类推到了侧边栏下方。尝试放入行并更改宽度，但结果保持不变。任何帮助真的非常感谢。这个游戏很新。

CSS

.sidebar {
width: 400px;
float: left;
margin-right: 48px;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul .active a {
color: #2e2e2e;
}
.main-content {
width: 600px;
float: right;
margin-bottom: 48px;
}
.main-content img {
margin-bottom: 24px;
}

<!-- PORTFOLIO AREA -->
<div class="container">
<div class="row">
<div class"sidebar">
<h4>Services we offer</h4>
<ul>
<li class="active"><a href="#">Project Name</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
</ul>
</div> <!--end sidebar -->
<div class="main-content">
<h3>Full groom</h3>
<p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>
<img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
<img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">

</div> <!-- end main-content -->
</div> <!-- end row --> 
</div> <!-- end container -->

Answer 1

看看这是否适合您，如果您希望它位于px请告诉我，我已经将宽度更改为%。

.sidebar {
width: 35%;
float: left;
margin-right: 5%;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul .active a {
color: #2e2e2e;
}
.main-content {
width: 60%;
float: right;
margin-bottom: 48px;
}
.main-content img {
margin-bottom: 24px;
}

<!-- PORTFOLIO AREA -->
<div class="container">
<div class="row">
<div class="sidebar">
<h4>Services we offer</h4>
<ul>
<li class="active"><a href="#">Project Name</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
</ul>
</div> <!--end sidebar -->
<div class="main-content">
<h3>Full groom</h3>
<p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>
<img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
<img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">
</div> <!-- end main-content -->
</div> <!-- end row --> 
</div> <!-- end container -->

Answer 2

使用 flex

.row {
display: flex;
}
.slidebar {
flex: 1;
}
.main-content {
flex: 9;
margin-left: 20px;
}

<div class="container">
<div class="row">
<div class"sidebar">
<h4>Services we offer</h4>
<ul>
<li class="active"><a href="#">Project Name</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
</ul>
</div> <!--end sidebar -->
<div class="main-content">
<h3>Full groom</h3>
<p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>
<img src="" alt="Dog1">
<img src="" alt="Dog2">
</div> <!-- end main-content -->
</div> <!-- end row --> 
</div> <!-- end container -->

Answer 3

你不需要floats.我建议使用flex.您将对 DOM 拥有更多控制权。

.wrapper{
display:flex;
}
.sidebar {
width: 35%;
padding: 10px;
background: #ccc;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar ul .active a {
color: #2e2e2e;
}
.main-content {
width: 60%;
padding: 10px;
background: #ddd;
}
.main-content img {
margin-bottom: 24px;
}

<!-- PORTFOLIO AREA -->
<div class="container">
<div class="row wrapper">
<div class="sidebar">
<h4>Services we offer</h4>
<ul>
<li class="active"><a href="#">Project Name</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
<li><a href="#">Full groom</a></li>
</ul>
</div> <!--end sidebar -->
<div class="main-content">
<h3>Full groom</h3>
<p>lorem there was a a bar maid in sale , who tattooed on her chest all the prices of ale. and on her behind, for the sake of the blind, she had the same thing tattooed but in braille</p>
<img src="C:UsersSueDesktopphotoshopimagesservice1.jpg" alt="Dog1">
<img src="C:UsersSueDesktopphotoshopimagesservice2.jpg" alt="Dog2">
</div> <!-- end main-content -->
</div> <!-- end row --> 
</div> <!-- end container -->