2つの要素を列内の一番下に配置する

フッターセクションの行を4列に分割し、右端の最後の列に貼り付けた写真のようなものを追加したいが、見た目を維持したい画像とテキストを一緒にすべての画面サイズに沿って、私は小さな画面でのみ動作し、画面が広がると、画像とテキストはあまりにも離れてお互いに離れています。どうすればこれを達成できますか？2つの要素を列内の一番下に配置する

.wrapper { 
 
    position:relative; 
 
    text-align:center; 
 
    margin:0 auto; 
 
} 
 

 
.footer { 
 
    font-size:40px; 
 
    color:black; 
 
} 
 
.talk { 
 
    position:absolute; 
 
    text-align:left; 
 
    bottom:0; 
 
} 
 

 
.footer-logo { 
 
    vertical-align: bottom; 
 
    float:right; 
 
    height:150px !important; 
 
}

<div class="wrapper"> 
 
    <p class="footer talk">Big Text</p> 
 
    <img class="footer-logo" src='http://via.placeholder.com/140x100'> 
 
</div>

出典

2017-08-11 John R

？最悪の場合のシナリオを明確にすることなくそのような前提を作ることはできません。最も重要なのは、*保存された*ということです。 –

画面サイズが小さければ、テキストと画像は小さくなります。画像を右に、テキストを左に、わずか10pxの間隔で保存したいだけです。現時点でどうなるのか、お互いの分け合いがあまりにも多いです。 –

利用可能なスペース、文字の数、そしてイメージを比率で維持するのに最適な方法をJSで計算する必要があります...なぜなら、ただひとつの画像を使うのではないのですか？ BigBla []をテキスト+イメージとして取得し、両方を自動的に応答させる必要性は何ですか？ –

あなたは単にに '画像' と 'text' 要素のdisplay設定することができます。inline

または< pはチャゲを> <スパン>、

< p>タグがすべての行を取り、一緒に行えなかったためです。

しかし<スパン>タグは

hereコンテンツ幅（としない画面幅）かかりインライン要素である「表示」プロパティに関する有用な説明です。

.wrapper { 
 
    display: block; 
 
    position:absolute; 
 
    right:0; 
 
    bottom:0; 
 
    text-align:center; 
 
    margin:0 auto; 
 
} 
 

 
.footer { 
 
    display: inline; 
 
} 
 

 
.talk{ 
 
    font-size:40px; 
 
    color:black; 
 
} 
 
.logo{ 
 
    height: 150px; 
 
    width: auto; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="index.css"> 
 
</head> 
 
<body> 
 

 
<div class="wrapper"> 
 
    <span class="footer talk">Big Text</span> 
 
    <img class="footer logo" src='http://via.placeholder.com/140x100'> 
 
</div> 
 

 
</body> 
 
</html>

出典

2017-08-11 18:19:15

あなたはこのコードを試すことができます。 I'amは、htmlページでにいくつかのメディアクエリと、いくつかのdivを追加

Htmlの

<div class="wrapper"> 
    One Columns 
</div> 
<div class="wrapper"> 
    two Columns 
</div> 
    <div class="wrapper"> 
    three Columns 
</div> 
    <div class="wrapper"> 
    <div class="A"> 
    <p class="footer talk">Big Text</p> 
    <img class="footer-logo" src='http://via.placeholder.com/140x100'> 
    </div> 

</div>

CSS私の携帯が340px幅である場合はどう

.wrapper { 
    position:relative; 
    text-align:center; 
    margin:0 auto; 
width:25%; 
float:left; 
} 

.footer { 
    font-size:40px; 
    color:black; 
} 
.talk { 
    position:absolute; 
    text-align:left; 
    width:50%; 
    float:left; 
} 

.footer-logo { 
    vertical-align: bottom; 
    float:right; 
    height:150px !important; 
    width:50%; 
    float:right; 
} 

.A{ 
    width:100%; 
} 

@media (max-width:525px){ 
.A{ 
    width:100%; 
} 

.footer-logo { 

    width:20%; 
    float:right; 
} 

.talk { 

width:20%; 
float:left; 
font-size:28px; 
} 
}

出典

2017-08-11 18:32:31

2つの要素を列内の一番下に配置する

答えて

関連する問題