如何將一個元素相鄰放置一個未定義位置的元素？

我對html/xml/css非常陌生，我正在盡我所能教自己。不過，我遇到了Google搜索無法解決的問題。如何將一個元素相鄰放置一個未定義位置的元素？

我想在固定相對於另一個元件（？）

的位置來定位一個小圖像我相信這是我想第二元件相對於位置的元素的代碼。

<style type="text/css"> 
#wrap { 
    width:550px; 
    background-color:#fff; 
    margin:0 auto; 
    padding:0; 
    border-right:1px solid #ccc;   
    border-left:1px solid #ccc; 
} 

#container { 
    width: 500px; 
     margin:0 auto; 
    padding: 25px; 
     font-size:.85em; 
    background-color: #fff; 
}

，這是我想要編輯定位名爲.xyz爲「#wrap」右邊部分代碼

.xyz { 
    position: ???; 
    top: 200px; 
    right: ???; 
    _position: ???; 
    _margin: ???; 
    _text-align: right; 
    z-index: 1337; 
}

我搜索SOF有導致我相信我應該做的東西沿線 - Position an HTML element relative to its container using CSS - 但我一直未能。

我非常感謝您可能提供的任何幫助。希望我已經正確解釋了我的問題。

來源

2010-05-29 user353389

寫適當的標記你爲什麼還沒能的方法做另一個問題中提出的建議？它不工作嗎？爲什麼你相信*你的代碼的一部分是你所指的那部分？你應該知道**，否則我們可能無法提供幫助。 – 2010-05-29 03:41:27

如果你想.xyz在#wrap裏面，但在右邊，在你的.xyz元素上做一個float:right;會達到你想要的。

編輯：嘗試這樣的事：

<div class="wrap"> 
    <div class="shuffle"><my shuffle img></div> 
    ......Other stuff...... 
</div>

然後CSS明智：

.wrap{position:relative;overflow:visible;} 
.shuffle{position:absolute;right:100px;}

來源

2010-05-29 03:52:46 edl

爲了使事情更清楚一點......（順便說一句，右：沒有把戲）我試圖修改我的tumblr主題，所以現有的代碼是由別人寫的。 .shuffle {position：fixed;頂部：35px;右：3px; _position：static; _margin：3px; _text-align：right; z-index：1337; } ....

-----我只是試圖將瀏覽器右側的「洗牌」按鈕重新定位到#wrap的右側 – user353389 2010-05-29 04:31:55

任何人有任何其他想法或建議？ – user353389 2010-05-29 17:02:24

如果'.shuffle'包含在'.wrap'中，並且你不關心文檔的流向，那麼在'.wrap'之外定位'.shuffle'最簡單的方法就是設置'.wrap {position：相對;}'和'.shuffle {position：absolute; right：-200px}'（或者你想移動'.shuffle'右側的像素數量）沒有真正看到你在說什麼和實際的文檔結構，我不能提出任何比這更好的建議。 – edl 2010-05-29 18:00:17

我的首選方法，大多數時候，是把所有我想要的元素旁邊的每個其他放入一個容器中，然後將所有東西都留下所以，我要添加一個容器類（我「米不是ID的超級粉絲 - 他們是非常有限的）添加到您的風格，並提出一些修改：

.container { 
    float: left; 
    width: 800px; 
} 

#wrap { 
    float: left; 
    width:550px; 
    background-color:#fff; 
    margin:0 auto; 
    padding:0; 
    border-right:1px solid #ccc;   
    border-left:1px solid #ccc; 
} 

#container { 
     width: 500px; 
     margin:0 auto; 
     padding: 25px; 
     font-size:.85em; 
     background-color: #fff; 
} 
.xyz { 
    float: left; 
    margin: 0 0 0 20px; 
    width: 200px; 
}

此代碼會給你的。在左側包裹div，在右側包含.xyz類，並在.container類中包含20px的邊距。

不確定您想要對您的#container ID執行什麼操作，根據您的斷言想要將.xyz放在.wrap旁邊。

如果您真的想將#container與其他元素放在同一行中，請將其左移浮動：

.container { 
    float: left; 
    overflow: auto; 
    width: 1330px; 
} 

#container { 
     float: left; 
     width: 500px; 
     margin:0 0 0 20px; 
     padding: 25px; 
     font-size:.85em; 
     background-color: #fff; 
} 

.xyz { 
    float: left; 
    margin: 0 0 0 20px; 
    width: 200px; 
}

容器ID和xyz類現在每個都有左邊距20px，而大容器類比所有div的總和寬。

這就是會一遍又一遍地爲我工作的建設靜態網站和WordPress的孩子主題（主要是基於創世記框架），因爲我從2007年開始

來源

2013-05-26 23:13:50 marybaum

如何將一個元素相鄰放置一個未定義位置的元素？

回答

相關問題