Question

如何将下面的图像和框对齐在同一行？左边的图像和右边的框，它们之间有一些空间。

<div id="slideshow" >
    <div id="changeimage">
       <img class="image" src="bafdf1f214f5a800c95ef301234c254a.iix"/>
    </div>

    <div id="newsbox">
        <span class="label label-danger">Latest News</span>
        <div class="group-box">
            <div class="grey-group">    
                <span>Notes:This is a box</span>                
            </div>
        </div> 
    </div>
</div>

Answer 1

就像@ntgCleaner所说的那样：“大约有20种方法可以给那只猫上皮。”

这可能是实现这一目标的一种方法：

#slideshow {
  display: flex;
}

.group-box {
  margin-top: 50px; 
}

<div id="slideshow" >
 <div id="changeimage">
   <img class="image" src="//thumb7.shutterstock.com/display_pic_with_logo/260389/347420135/stock-photo-top-view-of-architect-drawing-on-architectural-project-347420135.jpg"/>
  </div>

 <div id="newsbox"><span class="label label-danger">Latest News</span>
   <div class="group-box">
       <div class="grey-group">   
          <span>Notes:This is a box</span>                
       </div>
   </div> 
 </div>
</div>

Answer 2

您可以使用“float”或“display：inline-block”css选择器以这种方式设置元素。我相信这个简单的例子会有所帮助：

<style>
#slideshow{
  border: 1px solid black;
  width: 100%;
}
#changeimage{
  float: left;
  background: blue;
  width: 40%;
}
#newsbox{
  float: left;
  background: red;
  width: 40%;
}
#separator {
  width: 20%;
  height: 100px;
  float: left;
  background: green;
}
.clear{
  clear: both;
}

</style>
<div id="slideshow" >
  <div id="changeimage"><img class="image" src="http://www.w3schools.com/html/pic_mountain.jpg"/></div>
  <div id="separator"></div>
  <div id="newsbox"><span class="label label-danger">Latest News</span>
    <div class="group-box">
      <div class="grey-group">   
        <span>Notes:This is a box</span>                
      </div>
    </div> 
  </div>
  <div class="clear"> </div>
</div>

以下是工作示例： https://jsfiddle.net/ej53b8x2/

如果你想在行中设置元素，你应该使用像bootstrap或foundation这样的框架吗？

对齐同一行

2 个答案: