將兩個div並排浮動（響應）

如何使該容器響應，以便文本和img自動成爲塊元素。我嘗試了Flex方向，但無論如何它沒有工作。如有必要，可有人糾正我的代碼，並建議我媒體查詢規則來進行響應式設計將兩個div並排浮動（響應）

<div class="top"> 
    <h1>Welcome</h1> 
    <div class="portrait"> 
     <img src="https://pixy.org/images/placeholder.png" alt=""> 
     <h2>XXXXXXXXXX</h2> 
    </div> 
</div> 

.top h1{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-grow: 1; 
    background-color: black; 
    height: 20vw; 
    margin-top: 0; 
    font-size: 5vw; 
    color: white; 
    text-shadow: 5px 5px rgb(142, 135, 136); 
} 

.top img { 
    width: 20vw; 
}

在此先感謝

來源

2017-07-10 lologic

顯示：對於具有在CSS ID 「文本」和「IMG」的div內聯塊; –

向我們展示您到目前爲止所嘗試的，所以我們可以幫助您更好！ – Gacci

@Aditya_kr不會使它響應！ – Gacci

我想這是你所追求的。 display: flex;是非常強大的財產和有用的時候，以佔用其餘的空間和居中。

修改
這裏是一個demo，我不會建議這種方法使用max-width因爲它不是「移動先行」。但是，如果這是你想要的這個項目，那麼確定。

.container { 
    display: flex; 
    flex-direction: row; 
    background-color: deepskyblue; 
} 

#img { 
    width: 140px; 
    height: 140px; 
} 

#text { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    flex-grow: 1; 
    background-color: deeppink; 
    min-height: 100px; 
} 

@media screen and (max-width: 700px) { 
    .container { 
    flex-direction: column; 
    } 

    #img { 
    width: 100%; 
    height: auto; 
    } 
}

.container { 
 
    display: flex; 
 
    background-color: deepskyblue; 
 
} 
 

 
#img { 
 
    width: 140px; 
 
    height: 140px; 
 
} 
 

 
#text { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    flex-grow: 1; 
 
    background-color: deeppink; 
 
}

<div class="container"> 
 
    <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png" /> 
 
    <div id="text">text on the left, next to the img</div> 
 
</div>

來源

2017-07-10 20:13:41

哇！非常感謝。它真的幫助我。但還有一件事。如果我使用這個代碼，你說，我想申請一個媒體查詢規則最大寬度700像素，例如我可以如何更改項目，以便他們顯示爲塊元素。所以文本是在img之上，並且這兩個元素都有100％的寬度？ – lologic

@ lologic應該圖像有'最大寬度'還是100％？ –

它應該是100％。與瀏覽器一樣寬。 – lologic

好了，好了所以這裏是，如果我理解你所要完成的很好的東西。糾正我或更新你的問題，如果我錯了！

#img{ 
 
    width: 200px; 
 
    height: 150px; 
 
    float: left; 
 
} 
 
#text{ 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <img id="img" src="https://www.archlinux.org/static/vector_tux.864e6cdcc23e.png"/> 
 
    <div id="text">text on the left, next to the img</div> 
 
    
 
</div>

來源

2017-07-10 20:01:53 Gacci

將兩個div並排浮動（響應）

回答

相關問題