如何在兩個div上製作響應式div /按鈕/圖像？

我正在測試兩個框架（skeleton.css和crow.css）來製作響應式網格，但我無法集中並將div放在兩列上。有兩家圖片顯示它如何看：如何在兩個div上製作響應式div /按鈕/圖像？

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/crow.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
</head> 
<body> 
    <div class="crow"> 
    <div class="ws-5 box"> 
    </div> 
    <img class="img" src="images/img.png"> 
    <div class="ws-5 box"> 
    </div> 
    </div> 
</body> 
</html>

custom.css與烏鴉：

.box { 
    background: #eee; 
    border-radius: 4px; 
    height: 200px; 
    border: 1px solid black; 
} 
.img { 
    position: absolute; 
    left: 550px; 
} 
.crow { 
    position: relative; 
}

HTML代碼與框架：

Desktop Smartphone 的烏鴉與實際的HTML代碼

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="css/skeleton.css"> 
    <link rel="stylesheet" href="css/custom.css"> 
</head> 
<body> 
    <div class="container"> 
    <div class="six columns box"> 
    </div> 
    <img class="img" src="images/img.png"> 
    <div class="six columns box"> 
    </div> 
    </div> 
    </div> 
</body> 
</html>

帶骨架的custom.css：

.box { 
    background: #eee; 
    border-radius: 4px; 
    height: 200px; 
    border: 1px solid black; 
} 
.img { 
    position: absolute; 
    left: 420px; 
} 
.container { 
    position: relative; 
}

來源

2017-02-15 U. H.

您是否正在尋找您所使用的框架內解決，或者是你開出了自定義代碼解決方案嗎？ – Jesse

假設圖像的尺寸是100px * 100px，您可以嘗試使用'.img { position：absolute; left：calc（50％ - 50px）; top：calc（50％ - 50px）; }'但你需要爲.crow – Banzay

@Banzay定義尺寸，沒有任何事情發生。 –

您可以使用CSS屬性transform達到你想要的位置。

它可以通過設置.img左邊到50％，然後transform: translate(-50%)其寬度的一半又抵消了它的權利，完全定心.img

我也做了「骨架」一個給你，但「烏鴉」一將是相同的：

.box { 
 
    background: #eee; 
 
    border-radius: 4px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 
.img { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.container { 
 
    position: relative; 
 
}

<div class="container"> 
 
    <div class="six columns box"> 
 
    </div> 
 
    <img class="img" src="http://placehold.it/350x150"> 
 
    <div class="six columns box"> 
 
    </div> 
 
</div>

來源

2017-02-15 20:12:11 Zze

花了太多的時間這個造型和@Zze打我一拳。但是，是的，相對和絕對定位加上translate()一定會完成工作。

.wrap { 
 
    position: relative; 
 
    max-width: 960px; 
 
    margin: auto; 
 
    background: rgba(0,0,0,0.1); 
 
    padding: 2.5%; 
 
    box-sizing: border-box; 
 
    height: 360px; 
 
    } 
 
.left, .right { 
 
    width: 50%; 
 
    height: 100%; 
 
    float: left; 
 
    padding: 10px; 
 
    box-sizing: border-box; 
 
    } 
 
    
 
.content { 
 
    background: #84bde4; 
 
    width: 100%; 
 
    height: 100%; 
 
    } 
 

 
.centered { 
 
    position: absolute; 
 
    left: 50%; 
 
    top: 50%; 
 
    transform: translate(-50%, -50%); 
 
    z-index: 99; 
 
    height: 100px; 
 
    width: 100px; 
 
    border-radius: 100px; 
 
    background: #f1c25e; 
 
    box-shadow: 0px 16px 26px -10px rgba(0,0,0,0.25); 
 
    text-align: center; 
 
    }

<div class="wrap"> 
 
    <div class="centered"></div> 
 
    <div class="left"><div class="content"></div></div> 
 
    <div class="right"><div class="content"></div></div> 
 
</div>

來源

2017-02-15 20:19:05 Jesse

對不起，傑西，你看起來不錯！ – Zze

哈哈，別擔心！ – Jesse

如何在兩個div上製作響應式div /按鈕/圖像？

回答

相關問題