將兩個元素排列在列的底部

我在頁腳部分的4列中分割了一行，在右邊的最後一列我想添加類似附加圖片的內容，但我想保留圖片和文字一起沿着所有的屏幕尺寸，我只適用於較小的屏幕，而且屏幕越寬，圖片和文字就會彼此分開。我怎樣才能做到這一點？將兩個元素排列在列的底部

.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

如果我的手機是340px寬？如果沒有澄清最壞的情況，你就不能做出這樣的假設 - 最重要的是你的意思是「*保留*」。 –

如果屏幕尺寸太小，文字和圖像會變小，我只想將圖像保留在右側，文字保留在左側，大約只有10px的分隔。現在發生的事情是，它們彼此分離太多 –

您需要JS來計算可用空間，字符數以及它們如何最適合保持圖像的比例...，而不是使字符...等等，爲什麼不只是使用一個圖像？將BigBla []作爲文本+圖像以及使它們自動響應的需求有什麼收穫？ –

，你可以簡單的設置 '影像' 和 '文字' 元素的display：inline

或土長< p >標記爲< span>，

因爲< p>標記佔據了整條線並且它們不能一起發生！

但< span>標記是內嵌元件，其取內容寬度（而不是屏幕寬度）

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

你可以試試這個代碼。我'在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

.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

將兩個元素排列在列的底部

回答

相關問題