CSS使ImageIcon的下移與文本

有當文本只有一行「x」圖標也在同一行，但有兩個或兩個以上的「X」圖標時，文本也想繼續前進。

1) 

This is text to test   x 

2) 

This is test to test 
this is second line   x

我試圖這樣，

css: 

.leftalign { 
    float: left; 
} 
.rightalign{ 
float: right; 
} 

.mainWrap{ 
    width: 100%; 
} 

.removeWrap { 
    width: 100%; 
} 

Html: 
<div class="mainWrap"> 
    <div class="title leftalign"> 
     This is test to test 
     this is second line 
     <div class="removeWrap rightalign"> 
      <a href="" class="CloxeIcon">x</a> 
     </div> 
    </div> 
</div>

通過使用此我得到，

This is test to test this is second line this is 
third line this is fourth line this is fifth line new 
line            x

問題是現在的 'X' 圖標下面的 '新' word

我想這樣的，所有文本應在左側和圖標右側

This is test to test this second line this is 
third line this is fourth line this is fifth 
line new line         x

來源

2013-08-23 Kango

也許你想要這個：http://jsfiddle.net/V6H67/3/從底部的位置將等於字體大小。 –

我能想到使用如下的相對和絕對定位的。
<div class="mainWrap">
This is test to test
this is second line
<a href="" class="CloxeIcon">x</a>
</div>

和CSS
.mainWrap{
position: relative;
}
.mainWrap a{
position: absolute;
display: block;
bottom: 0;
right: 0;
}

來源

2013-08-23 07:45:10 besabestin

這樣呢？ jsFiddle

<div class="two_columns"> 

    <div class="left_column"> 
     This is test to test<br> 
     This is another line 
    </div> 
    <div class="right_column"> 
     x 
    </div> 
</div>

而CSS：

.two_columns>div { 
    display: inline-block; 
    vertical-align: left; 
} 
.right_column { 
    margin-left: 5px; 
}

來源

2013-08-23 07:46:46 tobspr

HTML：

<div class="mainWrap"> 
    <div class="title leftalign"> 
    This is test to test this is second line 
    </div> 
    <div class="removeWrap rightalign"> 
     <a href="" class="CloxeIcon">x</a> 
    </div> 
</div>

CSS：

.leftalign { 
    display: inline-block; 
    width: 125px; 
} 
.rightalign{ 
    display: inline-block; 
    vertical-align: bottom; 
} 
.mainWrap{ 
    width: 100%; 
}

來源

2013-08-23 07:50:13

試圖找出文本佔用的行數是失敗的，至少是直接的。

但是，基於元素的高度，您可以破解一個功能性解決方案......線條越多，元素將變得越高。

你可以用幾種方法做到這一點......但這似乎是最簡單的。

嘗試：

.mainWrap 
{ 
    position:relative; 
    width: 100%; 
}

這允許絕對定位的圖標，就像這樣：

.rightalign 
{ 
    position:absolute; 
    right:0; 
    top:25%; 
}

這個工作對我的考驗......你也可以，當然，調整「頂」根據你的喜好定位。

它也覆蓋.rightalign對圖標的影響，這就是爲什麼right：0被設置的原因。

從您的代碼中的一些小筆記...

...如果你想強迫那些是兩條線，您可以添加它們之間的BR。

...此外，這將圖標發送到屏幕的最右側。這是因爲你沒有明確地在div上設置寬度來包含它們。如果你不確定div的寬度，你也可以通過max-width設置它們。

希望它有幫助。

來源

2013-08-23 07:57:47 Steve

CSS使ImageIcon的下移與文本

回答

相關問題