같은 줄에 정렬

Question

아래 이미지와 상자를 같은 행에 정렬하는 방법은 무엇입니까? 왼쪽에 이미지가 있고 오른쪽에 상자가 있고 그 사이에 약간의 공간이 있습니다.

<div id="slideshow" > 
    <div id="changeimage"> 
     <img class="image" src="bafdf1f214f5a800c95ef3c254a.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

Like @ntgCleaner는 다음과 같이 말했습니다. "그 고양이를 피하는 약 20 가지 방법이 있습니다." 당신의 요소를 이런 식으로 설정하는 CSS 선택기 :

#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

당신은 "부동"또는 "인라인 블록 디스플레이"를 사용할 수 있습니다 :

이 이것을 달성하는 한 가지 방법이 될 수 있습니다. 나는이 간단한 예제가 도움이 될 것입니다 보라 : 여기

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

당신은 어쩌면 당신은 부트 스트랩 또는 재단과 같은 몇 가지 프레임 워크를 사용한다 행의 요소를 설정하려면?