Question

我目前正在处理联系页面。基本上，我想创建一个主容器。主容器内部包含一个向右浮动的子容器。但每当我试图包含一些文本时，子容器就会被“推下”。为什么会如此，我该如何解决？

.contact-container-main {
  width: 900px;
  height: 600px;
  margin: 100px auto;
  background-color: #808080;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.contact-container-main h2 {
  width: 250px;
  margin: 15px;
  font-size: 40px;
  color: #FF0000;
}
.contact-container-main p {
  width: 600px;
  margin-left: 15px;
}
.contact-container-sub {
  width: 250px;
  height: 580px;
  margin: 10px;
  float: right;
  background-color: #000000;
}

<div class="contact-container-main">
  <h2>Contact Us</h2>
  <p>
    Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit
  </p>

  <div class="contact-container-sub">

  </div>
</div>

Answer 1

而不是浮动：在子容器上，你可以添加position：absolute;顶部和右侧位置也是一个位置：相对于.contact-container-main。

get 'pizza' do
  @pizza = Pizza.first #=> returns object type Pizza, i want this to be a array as well
end

get 'pizzas' do
  @pizzas = Pizza.first(10) #=> returns an array of the first 10 results. 
end

Answer 2

你需要一个文本容器，还有一个浮动

<div class="contact-container-main">
   <div class="contact-container-text">
  <h2>Contact Us</h2>
  <p>
    Lorem ipsum dolor sit amet conse ctetuer adipiscing elit. Morbi comod sed dolor sit amet consect adipiscing elit
  </p>
</div>

  <div class="contact-container-sub">

  </div>
</div>

Sub div在主div中被推下

2 个答案: