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:\Users\Sue\Desktop\photoshop\images\service1.jpg" alt="Dog1">
      <img src="C:\Users\Sue\Desktop\photoshop\images\service2.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:\Users\Sue\Desktop\photoshop\images\service1.jpg" alt="Dog1">
      <img src="C:\Users\Sue\Desktop\photoshop\images\service2.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。

＆＃13;

.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;
}

＆＃13;

<!-- 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:\Users\Sue\Desktop\photoshop\images\service1.jpg" alt="Dog1">
      <img src="C:\Users\Sue\Desktop\photoshop\images\service2.jpg" alt="Dog2">


     </div> <!-- end main-content -->
  </div> <!-- end row --> 
</div> <!-- end container -->

＆＃13;

侧栏将主内容推下来

3 个答案: