Question

基本上我想在同一行上有两个div，我必须按照我想要的方式工作，除非我在它们下面添加任何内容时它们将位于它们的顶部。我试过清楚：左;那不起作用。有什么建议？提前致谢！＆LT; 3

#stream_panels {
  padding-left: 25%;
  padding-right: 25%;
}
#stream_chatrules {
  max-width: 320px;
  float: left;
}
#stream_questions {
  max-width: 320px;
  float: left;
  text-align: center;
}
footer {
  background-color: #1E1E1E;
  color: white;
  font-size: 18px;
  text-align: center;
}

<!doctype html>
<html>

<body>
  <div id='stream_panels'>
    <div id='stream_chatrules'>
      <img src='chat.png' alt='chat rules' draggable='false'>
      <br>
      <b>Just some random text<b><br>
	</div>
	<div id='stream_questions'>
		<img src='qa.png' alt='questions' draggable='false'><br>
			<b>Question 1</b>
      <br>Answer 1
      <br>
      <b>Question 2</b>
      <br>Answer 2
    </div>
  </div>


  <footer>website by cold hands, 2014
    <br>
    <span id='footer_links'>
		<a youtube</a> / 
		<a twitter </a> / 
		<a stream </a> / 
		<a deviantart</a>
	<span>
</footer>
</body>
</html>

Answer 1

尝试添加

#stream_panels {
    overflow: hidden;
}

＆＃13;

#stream_panels {
  padding-left: 25%;
  padding-right: 25%;
  overflow: hidden;
}
#stream_chatrules {
  max-width: 320px;
  float: left;
}
#stream_questions {
  max-width: 320px;
  float: left;
  text-align: center;
}
footer {
  background-color: #1E1E1E;
  color: white;
  font-size: 18px;
  text-align: center;
}

＆＃13;

<div id='stream_panels'>
  <div id='stream_chatrules'>
    <img src='chat.png' alt='chat rules' draggable='false' />
    <br />
    <b>Just some random text</b>
    <br />
  </div>
  <div id='stream_questions'>
    <img src='qa.png' alt='questions' draggable='false' />
    <br />
    <b>Question 1</b>
    <br />Answer 1
    <br />
    <b>Question 2</b>
    <br />Answer 2
  </div>
</div>
<footer>website by cold hands, 2014
  <br />
  <span id='footer_links'>
    <a>youtube></a>
    <a>twitter</a>
    <a>stream</a>
    <a>deviantart</a>
  </span>
</footer>

＆＃13;

或者

footer {
    clear: both;
}

＆＃13;

#stream_panels {
  padding-left: 25%;
  padding-right: 25%;
}
#stream_chatrules {
  max-width: 320px;
  float: left;
}
#stream_questions {
  max-width: 320px;
  float: left;
  text-align: center;
}
footer {
  background-color: #1E1E1E;
  color: white;
  font-size: 18px;
  text-align: center;
  clear: both;
}

＆＃13;

<div id='stream_panels'>
  <div id='stream_chatrules'>
    <img src='chat.png' alt='chat rules' draggable='false' />
    <br />
    <b>Just some random text</b>
    <br />
  </div>
  <div id='stream_questions'>
    <img src='qa.png' alt='questions' draggable='false' />
    <br />
    <b>Question 1</b>
    <br />Answer 1
    <br />
    <b>Question 2</b>
    <br />Answer 2
  </div>
</div>
<footer>website by cold hands, 2014
  <br />
  <span id='footer_links'>
    <a>youtube></a>
    <a>twitter</a>
    <a>stream</a>
    <a>deviantart</a>
  </span>
</footer>

＆＃13;

在div之后浮动影响一切

1 个答案: