定位一個與css分離的元素

我有一個位於div容器右側的標題/小文本。定位一個與css分離的元素

HTML：

<div id="img"></div> 
<h2>Heading<small>A long long text</small></h2>

CSS：

#img { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float: left; 
}

FIDDLE： http://jsfiddle.net/U8BnX/

我想達到以下，而我不能修改指定的HTML代碼。我想這一點在指定的HTML代碼與普通的CSS：

Result

我試了一下下面的方式，但是當DIV容器較寬失敗，因爲填充被設置爲靜態值。（http://jsfiddle.net/4p7qh/）有沒有更好的方法來做到這一點？

來源

2013-12-07 priojewo

我們可以用JS修改HTML嗎？ –

不，只是基本的CSS。背景是，顯示的結果是手機，所以我只能通過媒體查詢應用CSS規則。 – priojewo

我很好奇，爲什麼不能修改html代碼，以便它能夠代表文檔的實際結構？ –

這裏是一個純CSS的解決方案：

這是我大概會修改HTML結構，以便有更多的靈活性。我添加了一個容器元素，把她的元件從標題元素：

<div class="container"> 
    <div id="img"></div> 
    <h2>Heading</h2> 
    <small>A long long text</small> 
</div>

更新樣式表：

/* Common styles */ 
#img { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float: left; 
} 

/* Layout 1 */ 
.container h2 { display:inline; font-size:24px; } 
.container small { font-size:20px; font-weight:bold; } 


@media screen and (max-width: 500px) { 
    /* Layout 2 */ 
    .container { 
     position:relative;   
    } 

    .container h2 { position:absolute; top:-20px; left:0; } 
    .container { padding-top:40px; } 
}

活生生的例子：

http://jsfiddle.net/U8BnX/2/

儘量縮小預覽窗格，當寬度爲400px或更低時，佈局2開始播放。儘管可能不是一個完美的解決方案，但如果更改#img元素的大小，這仍然可以正常工作。

來源

2013-12-07 19:46:52 HaukurHaf

謝謝，但這並不能解決問題，正如我所想象的那樣：當div變寬（例如80px）時，標題h2不在同一位置。我希望這與非靜態寬度的div一起工作。 – priojewo

不可能，除非您修改HTML或使用JavaScript修改DOM和/或重新計算位置/寬度。 – HaukurHaf

你只需要用CSS來在兩個輸出之間切換什麼HTML結構？ – priojewo

看看這有助於

#img { 
    width: 50px; 
    height: 50px; 
    background: red; 
    float:left; 
    margin-top:30px; 
} 
h2{ 
    left:-50px; 
    position:relative; 
} 
small{ 
    display:block; 
text-indent:60px; 
}

來源

2013-12-07 19:44:02

謝謝，但這並不能解決問題，正如我所想象的：當div變寬（例如80px）時，標題h2不在同一個地方。我希望這與非靜態寬度的div一起工作。 – priojewo

定位一個與css分離的元素

回答

相關問題