使用div和圖像的CSS對齊問題

我甚至不知道這是否可能。如果你看看下面的圖片，你會看到一個紫色的盒子和一個白色的盒子。白色的盒子裏有我的狗Zuko的照片。我試圖保持該照片的右邊緣與其背後的紫色框的右邊緣完美對齊。但是，當然，當你開始改變屏幕尺寸時，它不再對齊。有什麼方法可以將這兩個div一起修復，因此當屏幕調整後，它們一起調整並保持對齊狀態？我試圖將它們都固定爲絕對的，使用百分比，但我甚至不知道我的目標是否可能。使用div和圖像的CSS對齊問題

box1是紫色框，box2是包含照片的白色。

page image

<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>ZUKO</title> 
    <link rel="stylesheet" href="style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
    </head> 
    <body> 
    <img id="zuko-title" src="zuko-title.svg" alt="Zuko"> 
    <div id="box1" class="floater"></div> 
    <div id="box2" class="floater"> 
     <div class="intro-text"> 
     <h3>hi, i'm Zuko the dog.</h3> 
     </div> 
     <img id="zuko-bolts" src="zuko-bolts.svg" alt=""> 
    </div> 
    <div id="box3" class="floater"> 
     <ul> 
     <li><a href="#">about</a></li> 
     <li><a href="#">frolicking</a></li> 
     <li><a href="#">my 'rents</a></li> 
     <li><a href="#">stuff</a></li> 
     </ul> 
    </div> 

    </body> 
</html> 

.floater { 
    position: absolute; 
} 

#box1 { 
    background-color: #DB7ACC; 
    width: 74%; 
    height: 100%; 
    top: 17%; 
    left: 15%; 
    z-index: 1; 
} 

#box2 { 
    background-color: #fff; 
    width: 84%; 
    height: 100%; 
    top: 25%; 
    left: 11%; 
    z-index: 3; 
} 

#zuko-bolts { 
    height: 50%; 
    float: right; 
    margin-right: 7.2%; 
    position: absolute; 
}

來源

2017-01-26 Jessica

有些'html'對於解決這個問題會很有幫助。 –

HTML肯定會有幫助。 CSS只是一半。 – Jhecht

doh！對不起，剛剛添加。 @Jhecht – Jessica

#zuko-bolts { 
position: absolute; 
height: 50%; 
right: 7.14%; 
top: 0; 
}

紫框的右側是更白框的右側的右6％。由於圖像位於白色框內，因此您需要在84％的框中找到等於6％的屏幕尺寸距離。所以基本上，6x100/84 =約7.14。

來源

2017-01-26 23:22:36

對不起，我很難理解......你是怎麼得到6％的？你能解釋得更好一點嗎？ – Jessica

紫色框左側15％+ 74％寬度爲89％，因此右側爲11％。白色盒子左側11％+ 84％寬度95％，所以它從右側5％。因此，紫色方塊的右側和白色方塊的右側之間的區別是6％ –

地方#box2在box#1之內。
由於它們都被定位，並且子女（即#box2）爲absolute，我們將能夠在#box1的範圍內定位#box2。
如果我們想的#box2右邊緣要與#box1右邊緣齊平，設置#box2right:0;這會爲任何邊緣工作，所以top:0;會的#box2頂部邊緣設置爲#box1頂部邊緣，等等。
如果我們在完整頁面模式下查看代碼片段，我們將看到無論視口（屏幕寬度）如何變化，#box2將不僅符合相對於#box1的尺寸，它將始終保持相對於#box1的邊界。

代碼片段

.floater { 
 
    position: absolute; 
 
} 
 
#box1 { 
 
    background-color: #DB7ACC; 
 
    width: 74%; 
 
    height: 100%; 
 
    top: 17%; 
 
    left: 25%; 
 
    z-index: 1; 
 
} 
 
#box2 { 
 
    background-color: #fff; 
 
    width: 84%; 
 
    height: 100%; 
 
    top: 25%; 
 
    right: 0; 
 
    z-index: 3; 
 
    background: url(http://news.vet.tufts.edu/wp-content/uploads/national-pet-dental-health-month.jpg)no-repeat; 
 
    background-size: contain; 
 
    border: 1px dashed #db7acc; 
 
} 
 
#zuko-bolts { 
 
    height: 50%; 
 
    float: right; 
 
    margin-right: 7.2%; 
 
    position: absolute; 
 
}

<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>ZUKO</title> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> 
 
</head> 
 

 
<body> 
 
    <img id="zuko-title" src="zuko-title.svg" alt="Zuko"> 
 

 
    <div id="box1" class="floater"> 
 

 
    <div id="box2" class="floater"></div> 
 

 
    </div> 
 

 
    <div class="intro-text"> 
 
    <h3>hi, i'm Zuko the dog.</h3> 
 
    </div> 
 
    <img id="zuko-bolts" src="zuko-bolts.svg" alt=""> 
 
    </div> 
 
    <div id="box3" class="floater"> 
 
    <ul> 
 
     <li><a href="#">about</a> 
 
     </li> 
 
     <li><a href="#">frolicking</a> 
 
     </li> 
 
     <li><a href="#">my 'rents</a> 
 
     </li> 
 
     <li><a href="#">stuff</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 

 
</body> 
 

 
</html>

來源

2017-01-26 23:38:36 zer00ne

有很多在這個問題上怎麼回事？下面是我可能會接近你自找的佈局。如果您有具體問題，請告訴我。

CODEPEN

對於紫色的盒子...... 裹的圖像在一個容器中，然後使用pseudoelement創建邊界。

例

.image-container { 
    height: 150%; 
    margin-right: 10%; 
    width: 90%; 
    text-align: right; 
    position: relative; 
} 

.image-container::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    top: -50px; 
    width: 90%; 
    right: 0; 
    border-top: 50px solid purple; 
}

全段

body { 
 
    width: 1200px; 
 
    margin: 150px auto 0; 
 
    background: lightgreen; 
 
    position: relative; 
 
} 
 
.intro-text { 
 
    position: relative; 
 
} 
 
.intro-text h3 { 
 
    position: absolute; 
 
    font-size: 120px; 
 
    letter-spacing: 4px; 
 
    top: -240px; 
 
    left: 120px; 
 
    z-index: 5; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
} 
 
#box2 { 
 
    background-color: #fff; 
 
    width: 84%; 
 
    z-index: 3; 
 
    padding-bottom: 150px; 
 
    position: relative; 
 
} 
 
#box2::after { 
 
    content: " "; 
 
    display: block; 
 
    height: 0; 
 
    clear: both; 
 
} 
 
.image-container { 
 
    height: 150%; 
 
    margin-right: 10%; 
 
    width: 90%; 
 
    text-align: right; 
 
    position: relative; 
 
} 
 
.image-container::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    top: -50px; 
 
    width: 90%; 
 
    right: 0; 
 
    border-top: 50px solid purple; 
 
} 
 
#zuko-bolts { 
 
    width: 40%; 
 
} 
 
#box3 { 
 
    /* this menu is strangely coded */ 
 
    position: absolute; 
 
    top: 50px; 
 
    left: -150px; 
 
    z-index: -1; 
 
}

<img id="zuko-title" src="https://placehold.it/50x50" alt="Zuko"> 
 
<div id="box1" class="floater"></div> 
 
<div id="box2" class="floater"> 
 
    <div class="intro-text"> 
 
    <h3>ZUKO</h3> 
 
    </div> 
 
    <div class="image-container"> 
 
    <img id="zuko-bolts" src="https://placehold.it/50x50" alt=""> 
 
    </div> 
 
</div> 
 
<div id="box3" class="floater"> 
 
    <ul> 
 
    <li><a href="#">about</a> 
 
    </li> 
 
    <li><a href="#">frolicking</a> 
 
    </li> 
 
    <li><a href="#">my 'rents</a> 
 
    </li> 
 
    <li><a href="#">stuff</a> 
 
    </li> 
 
    </ul> 
 
</div>

來源

2017-01-26 23:43:26 sol

所以問題在於，如果您在背景中看到帶有閃電botls的zuko照片，那麼這兩個圖像都是一個圖像。所以輕型螺栓的邊緣完美地排列起來。但是，當我使用保證金或其他任何方式移動它時，照片本身就會排成一列，這就是他們不會一直排列在一起的地方。 – Jessica

給出圖像位置：絕對，然後應用一個負向右位置，直到螺栓到達你想要的位置，並且狗排隊。 http://codepen.io/sol_b/pen/bgoQxB – sol

yesss謝謝你。我從你的代碼中知道問題是什麼。如此愚蠢。我有zuko螺栓設置爲高度，而不是寬度。這是一直在搞混亂的一件小事。非常感謝您花時間幫助我！ – Jessica

我有比埃德不同的方法，這可能是因爲它不完全是你需要但是如果你能解釋你的你需要我很樂意幫助你。

我對你的HTML很困難，所以我改了一點。希望你可以自己弄清楚你需要改變或添加哪些部分。

我試圖儘可能完整地評論代碼，以防萬一您無法理解。

body, 
 
html { 
 
    height: 100%; 
 
    margin: 0; 
 
    box-sizing: border-box; 
 
    background-color: lightgreen; 
 
    /*Makes the height and margin for both the HTML and Body elements 100% of the available height, also removes margins.*/ 
 
} 
 
.wrapper.zuko { 
 
    /*The wrapper for the stuff so that we don't polute our regular HTML with styles and colors we don't need.*/ 
 
    position: relative; 
 
    /* Makes absolute positioning work as expected for child elements*/ 
 
    background-color: white; 
 
    height: 100%; 
 
    /*Make it 100% as tall as its parent*/ 
 
    width: 80%; 
 
    /* but only 80% as wide*/ 
 
    margin: 50px auto; 
 
    /* 50px margin on the top and bottom, automatic padding on the left and right*/ 
 
    padding-top: 10px; 
 
} 
 
.wrapper.zuko .zuko-title { 
 
    position: absolute; 
 
    /*Changes how this is positioned with respect to its parent.*/ 
 
    height: 25px; 
 
    /*makes the element 25 pixels high*/ 
 
    line-height: 50px; 
 
    /*Probably not needed, but it was ther*/ 
 
    font-size: 45px; 
 
    /*How big is the title text? Hella.*/ 
 
    padding-left: 5px; 
 
    /* Little bit of padding on the left to ensure it's not right on the border */ 
 
    top: -25px; 
 
    /* positioned 25 pixels above the top border of it's parent */ 
 
    left: 5%; 
 
    /* left by 5%*/ 
 
    right: 10%; 
 
    /* right by 10% */ 
 
    background-color: #cd00cd; 
 
    /*random purple color */ 
 
} 
 
.wrapper.zuko .zuko-title .zuko-title-img { 
 
    position: absolute; 
 
    /*again, changes how this thing is positioned by its parent*/ 
 
    right: 0; 
 
    /* directly on the right edge */ 
 
    top: 100%; 
 
    /* 100% of the elements height from the top edge of the element */ 
 
} 
 
.wrapper.zuko .zuko-title .zuko-title-text { 
 
    position: absolute; 
 
    top: -20px; 
 
    /*Twitches the text above the purple border like in image.*/ 
 
}

<div class="wrapper zuko"> 
 
    <div class="zuko-title"> 
 
    <div class="zuko-title-text"> 
 
     Zuko 
 
    </div> 
 
    <img src="http://placehold.it/300x200?text=Zuko" alt="" class="zuko-title-img" /> 
 
    </div> 
 
    <div>Hello 
 
    </div> 
 
</div>

來源

2017-01-26 23:48:23 Jhecht

（發佈代表OP）的。

非常感謝大家的幫助。我所要做的只是改變高度：將寬度調整爲50％，並且使其與原本應該一致。

來源

2017-01-28 13:27:52 halfer

使用div和圖像的CSS對齊問題

回答

相關問題