如何強制2個div保持並排

我的網站的左側圖像根據瀏覽器大小進行縮放。右邊是一些文字。如何強制2個div保持並排

我的問題是在右邊的格會下降到圖像的下方左側當瀏覽器做得更小，只有當圖像是現在屏幕上的唯一項目，將它開始收縮

我想要實現的是，當您更改頁面的寬度，2周的div將保持並排，但左側的圖像會縮小而不是文本的下方下降。

我的努力

<div class="outer"> 
    <div class="img">Words</div> 
    <div class="other">More words</div> 
</div>

CSS

.img { 
float: left; 
     background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png"); 
     background-repeat: no-repeat; 
     background-size: 100%; 
     width: 100%; 
     height: 349px; 
     font-weight: bold; 
     text-shadow: 1px 1px 2px #000; 
     max-width: 300px; 
} 

.other{}

來源

2015-10-31 MyDaftQuestions

這是你所追求的：https://jsfiddle.net/0gyhrve2/3/？

CSS：

.img { 
     background-image: url("http://bootstrapbay.com/blog/wp-content/uploads/2014/05/yellow-taxi_vvvjao.png"); 
     background-repeat: no-repeat; 
     background-size: 100%; 
     width: 100%; 
     height: 349px; 
     font-weight: bold; 
     text-shadow: 1px 1px 2px #000; 
     max-width: 300px; 
} 

.imgContainer { 
    float: left; 
    width: 75%; 
} 

.other { 
    float: left; 
    width: 25%; 
}

HTML：

<div class="outer"> 
    <div class="imgContainer"><div class="img">Words</div></div> 
    <div class="other">More words</div> 
</div>

來源

2015-10-31 12:24:01 divix

正是我後...剛纔的.IMG 75％和25。其他％...將在幾分鐘內標記爲答案 – MyDaftQuestions

按問題更新。 – divix

嘛。我只想補充這行代碼：

CSS

.img, 
.other { display: inline-block; } 
.outer { white-space: nowrap; }

例在jsfiddle

來源

2015-10-31 12:27:33

.other div中的文字離開頁面 – MyDaftQuestions

不成問題。只需添加body {overflow-x：hidden; } –

如何強制2個div保持並排

回答

相關問題