Question

我试图让这两个div并排在一起并以页面为中心。我有一个解决方案，他们并排，但他们偏离中心，这导致页脚在页面的中间。

我现在已经解决了页脚问题的解决方案，但并没有将它们并排放置。我使用W3.CSS作为框架。

＆＃13;

.content {
  margin: 0 auto;
  margin-top: 230px;
  min-width: 100%;
}

div#slideshow {
  width: 660px;
  height: 455px;
  border: 10px solid #de2a96;
}

div#info {
  margin-left: -660px;
  border: 15px solid #14f20c;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  width: 550px;
  float: right;
}

.mySlides {
  width: 638px;
  height: 435px;
}

＆＃13;

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<div class="w3-container w3-content w3-row content">
  <div id="slideshow" class="w3-col l5">
    <div class="w3-content w3-display-container w3-hide-small slideshow">
      <img class="mySlides w3-animate-right" src="http://via.placeholder.com/660x440" alt="">
    </div>
  </div>
  <div id="info" class="abouttxt w3-col l7">
    <p class="w3-center w3-margin-top">Thank you for your interest in</p>
    <h1 class="w3-center title"><strong>Lorem Ipsum!</strong></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo sem eget rutrum sollicitudin. Duis sed aliquet enim. Integer placerat maximus dui quis pulvinar. Ut commodo euismod eros vestibulum tincidunt. Vivamus at lacinia nisi. Donec
      pellentesque commodo molestie. Sed quis porttitor justo. Nulla id posuere lacus. Mauris sollicitudin odio ac est pellentesque, at commodo ante venenatis.</p>
  </div>
</div>

＆＃13;

Answer 1

如果你从div＃info中删除你的左边缘和你的浮动，它们应该并排放置。

div#info {
  border: 15px solid #14f20c;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  width: 550px;
}

您还可以在包装#content div上使用flexbox，如下所示：

.content {
  display: flex;
  margin: 0 auto;
  margin-top: 230px;
}

如果您移除最小宽度，它将正确居中您的项目。您还可以使用其他flexbox属性来实现相同的效果（请参阅justify-content和flex-direction）。

Answer 2

我添加了相同的CSS和HTML我希望你的帮助完整

.content {
  display: flex;
  margin: 0 auto;
  margin-top: 230px;
}

div#slideshow {
  width: 660px;
  height: 455px;
  border: 10px solid #de2a96;
}

div#info {
 
  border: 15px solid #14f20c;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
   width: 660px;
  
}

.mySlides {
  width: 638px;
  height: 435px;
}

<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<div class="w3-row">
  <div id="slideshow" class="w3-col w3-container m6 l5">
    <div class="w3-content w3-display-container w3-hide-small slideshow">
      <img class="mySlides w3-animate-right" src="http://via.placeholder.com/660x440" alt="">
    </div>
  </div>
  <div id="info" class="abouttxt w3-col w3-container m6 l5">
    <p class="w3-center w3-margin-top">Thank you for your interest in</p>
    <h1 class="w3-center title"><strong>Lorem Ipsum!</strong></h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo sem eget rutrum sollicitudin. Duis sed aliquet enim. Integer placerat maximus dui quis pulvinar. Ut commodo euismod eros vestibulum tincidunt. Vivamus at lacinia nisi. Donec
      pellentesque commodo molestie. Sed quis porttitor justo. Nulla id posuere lacus. Mauris sollicitudin odio ac est pellentesque, at commodo ante venenatis.</p>
  </div>
</div>

2个div并排在页面上

2 个答案: