HTML CSSフレックスボックスの画像とテキスト

フレックスボックスを使用してdivを表示します。imageは左側に、textは右側に表示します。 imageはx軸方向にのみサイズを変更し、yではなくその比率を変更します。 text divの場合、x軸のサイズを多く変更するとすぐに、imageの下に表示されます。私は以下を使用します：HTML CSSフレックスボックスの画像とテキスト

<html> 
<head> 
<style> 
.outer { 
    background-color: gray; 
    display: flex; 
    padding: 10px; 
    flex-wrap: wrap; 
} 
.img { 
    max-height: 468px; 
    max-width: 100%; 
    margin-right: 10px; 
} 
.txt { 
    border: 1px solid yellow; 
} 
</style> 
</head> 
<body> 

<div class="outer"> 
    <img class="img" src="http://treepicturesonline.com/ebonytreesunset.jpg"> 
    <div class="txt"> 
     In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend to be long-lived, some reaching several thousand years old. In looser definitions, the taller palms, tree ferns, bananas and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion mature trees in the world.[1] 
    </div> 
</div> 

</body> 
</html>

これで部分的に動作します。このテキストの壁をTestのような小さなもので置き換えた場合、右側に表示され、サイズを大きく変更すると、必要に応じて底になりますが、この1つでは、直接下になります...次に、画像はxその比率を維持していません...どのようにこれらの問題を解決することができますか？

おかげ

出典

2017-10-02 darkchampionz

は、次のいずれかのメディアクエリでこれを行う、またはここのような、min-widthを使用することができます。

flex-growと組み合わせると、折り返し時に全幅になります。flex-basisは、幅を持たない場合は幅を共有します。

は最高のクロスブラウザのサポートのために、私はまた、img

Fiddle demo

スタックが

.outer { 
 
    background-color: gray; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
.outer .img { 
 
    flex-grow: 1; 
 
    flex-basis: calc(50% - 20px); 
 
    margin: 10px; 
 
    min-width: 300px; 
 
} 
 
.img img { 
 
    display: block; 
 
    max-width: 100%; 
 
} 
 
.txt { 
 
    flex-grow: 1; 
 
    flex-basis: calc(50% - 22px); /* 22px = 2*10px margin + 2*1px border */ 
 
    border: 1px solid yellow; 
 
    margin: 10px; 
 
    min-width: 300px; 
 
}

<div class="outer"> 
 
    <div class="img"> 
 
    <img src="http://treepicturesonline.com/ebonytreesunset.jpg"> 
 
    </div> 
 
    <div class="txt"> 
 
    In botany, a tree is a perennial plant with an elongated stem, or trunk, supporting branches and leaves in most species. In some usages, the definition of a tree may be narrower, including only woody plants with secondary growth, plants that are usable 
 
    as lumber or plants above a specified height. Trees are not a taxonomic group but include a variety of plant species that have independently evolved a woody trunk and branches as a way to tower above other plants to compete for sunlight. Trees tend 
 
    to be long-lived, some reaching several thousand years old. In looser definitions, the taller palms, tree ferns, bananas and bamboos are also trees. Trees have been in existence for 370 million years. It is estimated that there are just over 3 trillion 
 
    mature trees in the world.[1] 
 
    </div> 
 
</div>

スニペット包まれました

出典

2017-10-02 06:34:49 LGSon

HTML CSSフレックスボックスの画像とテキスト

答えて

関連する問題