将两个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并排浮动（响应）

回答

相关问题