Html 对齐同一行

如何在同一行中对齐下面的图像和框？左边是图像，右边是方框，中间有一些空格

<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>

最新消息
注：这是一个盒子

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

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

#幻灯片放映{
显示器：flex；
}
.分组框{
边缘顶部：50px；
}

最新消息
注：这是一个盒子

您可以使用“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>

#幻灯片放映{
边框：1px纯黑；
宽度：100%；
}
#改变形象{
浮动：左；
背景：蓝色；
宽度：40%；
}
#新闻箱{
浮动：左；
背景：红色；
宽度：40%；
}
#分离器{
宽度：20%；
高度：100px；
浮动：左；
背景：绿色；
}
.清楚{
明确：两者皆有；
}
最新消息
注：这是一个盒子

下面是一个工作示例：

---

如果你想在行中设置元素，也许你应该使用一些类似Bootstrap或Buffic之类的框架。从浮动开始：左？