列有问题。尝试获取包含图像的列和具有文本和背景的列彼此相邻

Having trouble with columns. Trying to get an column with an image and a column with text and background next to each other.

列有问题。尝试获取包含图像的列和具有文本和背景的列彼此相邻。

Here is the result I would like

这是我想要的结果

Here is what I am getting (fail)

这是我得到的(失败)

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
  padding-top: 25px;
  padding-bottom: 95px;
}

<div class="primary-content">
  <p class="intro">
  Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
  </p>
  <div id="container2">
    <div id="container1">
      <div id="About">
        <h2>About</h2>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum.
        </p>
      <!-- Column one end -->
      </div>
      <div id="Capitalbuilding">
      <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
      <!-- Column two end -->
      </div>
    </div>
  </div>
</div><!-- End .primary-content -->

4 个解决方案

#1

You could use flexbox here to get started.

您可以在此处使用flexbox开始使用。

Add...

#container1 {
  display: flex;
}

Guide to flexbox here.

这里指向flexbox。

fiddle

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
  padding-top: 25px;
  padding-bottom: 95px;
}

#container1 {
  display: flex;
}

<div class="primary-content">
  <p class="intro">
    Austin, Texas is not only the capital.
    <br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
  </p>
  <div id="container2">
    <div id="container1">
      <div id="About">
        <h2>About</h2>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus.
          Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam
          scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum. .
        </p>
        <!-- Column one end -->
      </div>
      <div id="Capitalbuilding">
        <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
        <!-- Column two end -->
      </div>
    </div>
  </div>

</div>
<!-- End .primary-content -->

#2

If you don't want to use any framework(like bootstrap) just add float to your container and add overflow:hidden to the parent container.

如果您不想使用任何框架(如bootstrap),只需将float添加到容器中,并将overflow:hidden添加到父容器中。

<div class="wrapper">
    <div class="col-1">Your content here</div>
    <div class="col-2">Your content here</div>
</div>

.wrapper {
    overflow:hidden;
}
.col-1, .col-2 {
    float:left;
    width: 50%;
}

#3

Here you go. Tested and works perfect:

干得好。经过测试并且完美无缺:

<div class="primary-content">
        <p class="intro">
            Austin, Texas is not only the capital.<br>It's a hub for 
            awesome live music, out of this world art, a booming tech 
             scene as well as a favorite foodie destination.
        </p>
<div id="container2">
  <div style="display: flex" id="container1">
    <div style="flex: 1" id="About">
        <h2>About</h2>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed 
         id ante pellentesque, ullamcorper sapien vel, sagittis tellus. 
         Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id 
         nunc laoreet eleifend. Integer aliquet massa vitae auctor 
         rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean 
         sit amet orci fringilla, egestas eros ornare, dignissim magna. 
         Duis commodo felis sit amet lacus congue fermentum. 
         Pellentesque tincidunt semper nibh vel posuere. Integer tempus 
         leo ut diam scelerisque fermentum in id tortor. Vestibulum et 
         condimentum arcu. Morbi vitae sem nec lectus egestas 
         tristique. Cras hendrerit maximus purus eu tempus. Suspendisse 
         nec nisi ipsum.  .
        </p>
        <!-- Column one end -->
    </div>

    <div style="flex: 1" id="Capitalbuilding">
        <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
        <!-- Column two end -->
    </div>
</div>

#4

Flexbox is a good solution to this. Just set the container1 to display: flex

Flexbox是一个很好的解决方案。只需将container1设置为display:flex即可

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}
#container1 {
  display: flex;
  background-color: #E9CCA9;

}
#Capitalbuilding {
  background-color: #4e4e4e;
  width: 40%;
}

<div class="primary-content">
     <p class="intro">
                Austin, Texas is not only the capital.<br>It's a hub for awesome live music, out of this world art, a booming tech scene as well as a favorite foodie destination.
            </p> 
    <div id="container2">
    <div id="container1">
        <div id="About">
            <h2>About</h2>
        <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id ante pellentesque, ullamcorper sapien vel, sagittis tellus. Aenean vulputate nisl eu eros blandit euismod. Sed sagittis id nunc laoreet eleifend. Integer aliquet massa vitae auctor rhoncus. Etiam vel diam euismod elit varius faucibus. Aenean sit amet orci fringilla, egestas eros ornare, dignissim magna. Duis commodo felis sit amet lacus congue fermentum. Pellentesque tincidunt semper nibh vel posuere. Integer tempus leo ut diam scelerisque fermentum in id tortor. Vestibulum et condimentum arcu. Morbi vitae sem nec lectus egestas tristique. Cras hendrerit maximus purus eu tempus. Suspendisse nec nisi ipsum.  .
        </p>
            <!-- Column one end -->
        </div>
        <div id="Capitalbuilding">
            <!-- Column two start -->
        <img src="https://image.ibb.co/e90Vhw/419796506_db7f02aedd_b.jpg" alt="picture of the Capital Building">
            <!-- Column two end -->
        </div>
    </div>
</div>

        </div><!-- End .primary-content -->