你如何定位一個元素相對於居中的兄弟

我有一個容器中居中的div，我想定位另一個元素旁邊的中心。你如何定位一個元素相對於居中的兄弟

這樣做的最好方法是什麼（如果可能的話）？

div的寬度由它們包含的文本決定，並且不是靜態的。

來源

2015-12-11 adamSrgnt

這是可能的。第二個div是否需要佔用第一個div和集裝箱之間的所有空間？如果是這樣，第一個div和容器之間的最大寬度比率是多少？ –

這裏有一個解決方案。具有製作第二格的優勢全部容器與第一格之間的剩餘空間。簡而言之，它是敏感的。

第一個div必須有一個小於容器的寬度（或者第二個div不會出現，具有負寬度）。第一個div的寬度可以是%，也可以是px（示例3）中的固定寬度。

如果您想要第二個div直到容器的邊緣，請從calc：calc(100vw - 100%)/2)中刪除-10px。我只是把它放在那裏，所以你可以看到我們沒有隱藏過多的東西，我們正在控制寬度。

body {margin: 0;} 
 
.container { 
 
    background-color: #e6e6e6; 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 
.container > * { 
 
    color: white; 
 
    padding: 20px; 
 
    margin: 0 auto; 
 
    
 
} 
 
.first-div { 
 
    background-color: #696; 
 
    position: relative; 
 
    box-sizing: border-box; 
 
    max-width: 60%; /* set default/fallback first div width here - fixed or % */ 
 
    margin-bottom: 20px; 
 
} 
 
.second-div { 
 
    left: 100%; 
 
    top: 0; 
 
    margin: 0 0 -20px; 
 
    padding: 20px; 
 
    background-color: #933; 
 
    width: calc(((100vw - 100%)/2) - 10px); 
 
    position: absolute; 
 
    box-sizing: border-box; 
 
}

<div class="container"> 
 
    <div class="first-div"> 
 
    <div class="second-div">Blog truffaut letterpress, austin butcher vinyl aesthetic. </div> 
 
    <h1>Example 1</h1> 
 
    This div is 60% of container (default, set in CSS). Kale chips banjo hella swag jean shorts. Fixie meh venmo, gastropub disrupt migas 3 wolf moon PBR&B. 
 
    </div> 
 
    
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="first-div" style="max-width: 30%;"> 
 
    <div class="second-div">Freegan you. Skateboard thundercats art party bushwick fashion axe. Tattooed 90's cornhole, flexitarian scenester mixtape pinterest beard fixie pabst.</div> 
 
    <h1>Example 2</h1> 
 
    This div is 30% of container (override by inline styling). Kale chips banjo hella swag jean shorts. Fixie meh venmo, gastropub disrupt migas 3 wolf moon PBR&B. Blog truffaut letterpress, austin butcher vinyl aesthetic. 
 
    
 
    </div> 
 
</div> 
 
<hr> 
 
<div class="container"> 
 
    <div class="first-div" style="max-width: 400px"> 
 
    <div class="second-div">Freegan you. </div> 
 
    <h1>Example 3</h1> 
 
    This div has a fixed width of 400px (inline styling). Kale chips. This div has fixed width, But the second one resizes responsively. 
 
    
 
    </div> 
 
</div> 
 
<hr>

來源

2015-12-11 23:41:49

可悲的是，我不能使用calc（），因爲我必須[支持IE8]（http：// caniuse .com /＃search = calc），但答案仍然包含我需要的所有內容，並且乾淨利落。感謝您的徹底解決方案。 – adamSrgnt

我仍然會使用它，使用JavaScript檢測IE8併爲這些用戶即時更改CSS。我會添加一個「獲得一個真正的瀏覽器，喲！」警惕，而在它:) –

爲了什麼它完成，這似乎是過度的代碼。希望微軟很快就會放棄支持，我不用再擔心更老的IE了。 – adamSrgnt

更新（二）答案：

.div1 { 
 
    position: relative; 
 
    outline: 3px solid red; 
 
    width: 230px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
} 
 

 
.div2 { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 105%; 
 
    outline: 3px solid blue; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
}

<div class="div1"> 
 
    div1 
 
    <div class="div2">div2</div> 
 
</div>

來源

2015-12-11 22:27:35 Milkmannetje

我更新了剪切以反映您更新的問題（您：div的寬度取決於它們包含的文本，並且不是靜態的。）例如：right：-210px ... – Milkmannetje

這需要div2爲固定寬度。如果它的寬度是由它內部的文本決定的呢？ – adamSrgnt

不再，再次檢查我的代碼:)例如：http://codepen.io/bbredewold/pen/GopZpK – Milkmannetje

-2

這應該是正是你需要的。顯然你可以根據需要調整事物的寬度和高度。關鍵是將容器內的div設置爲顯示：inline-block;

我不知道你對html和css有多熟悉，但在這裏我使用了一個外部樣式表。如果您願意，可以使用<style>標籤。

如果您刪除.container內的div的寬度，它們的大小將由其內容決定。

的Html

<!DOCtype html> 

<html> 
<head> 
    <meta charset="utf-8"> 

    <link rel="stylesheet" type="text/css" href="../css/sot.css"> 
</head> 

<body> 
    <div class="container"> 
     <div class="centered-div"></div> 
     <div class="other-div"></div> 
    </div> 
</body> 

</html>

CSS

.container { 
    border: 3px solid blue; 
    width: 100%; 
    height: 500px; 
    text-align: center; 
} 

.container div { 
    display: inline-block; 
    width: 250px; 
    height: 485px; 
    margin-top: 3px; 
} 

.centered-div { 
    position: relative; 
    border: 3px solid green; 
    margin: auto; 
} 
.other-div { 
    position: absolute; 
    border: 3px solid red; 
}

來源

2015-12-11 22:51:06 James

居中div不居中;） – Milkmannetje

哦，我看到你不想讓他們都居中？ – James

這裏錯編輯它，所以它的工作原理是所有你需要做的是定位中心一個相對和另一個div絕對 – James

你如何定位一個元素相對於居中的兄弟

回答

相關問題