需要低於div第一位

我想要文本左和文本權利應該在同一行，我不能重構HTML.And如果我使用絕對位置，我不知道它將如何行爲在不同的設備和屏幕大小到期到黃色區域（）。我能給的絕對位置參照父DIV（MS-S-RCH-結果）需要低於div第一位

#UpScopeLinkTop{ 
 

 
    display: block; 
 
    float:right; 
 

 
}

<div class="ms-srch-result" id="Result" name="Control"> 
 

 
    <div id="UpScopeLinkTop" class="ms-srch-upscope-top" style="display:block;width: 700px;">       
 
    Text Right 
 
    </div> 
 

 
    <div id="ResultCount" class="ms-srch-resultscount">       
 
    Text Left      
 

 
    </div> 
 

 
</div>

來源

2017-02-10 pawan kotak

解決方案1的HTML標籤擦除700像素寬度：（除去內聯樣式）

#UpScopeLinkTop{ 
 
    display: block; 
 
    float:right; 
 
}

<div class="ms-srch-result" id="Result" name="Control"> 
 
    <div id="UpScopeLinkTop" class="ms-srch-upscope-top">       
 
    Text Right 
 
    </div> 
 
    <div id="ResultCount" class="ms-srch-resultscount">       
 
    Text Left  
 
    </div> 
 
</div>

解決方案2：（柔性框）

.ms-srch-result{ 
 
\t display: flex; 
 
    flex-direction: row-reverse; 
 
    width: 200px; 
 
} 
 
.ms-srch-result div{ 
 
\t margin: 10px; 
 
}

<div class="ms-srch-result" id="Result" name="Control"> 
 
    <div id="UpScopeLinkTop" class="ms-srch-upscope-top">       
 
    Text Right 
 
    </div> 
 
    <div id="ResultCount" class="ms-srch-resultscount">       
 
    Text Left  
 
    </div> 
 
</div>

解決方案3：（彎曲性）

.ms-srch-result{ 
 
\t display: flex; 
 
    flex-direction: row-reverse; 
 
} 
 
.ms-srch-result div{ 
 
\t flex: 1; 
 
}

<div class="ms-srch-result" id="Result" name="Control"> 
 
    <div id="UpScopeLinkTop" class="ms-srch-upscope-top">       
 
    Text Right 
 
    </div> 
 
    <div id="ResultCount" class="ms-srch-resultscount">       
 
    Text Left  
 
    </div> 
 
</div>

來源

2017-02-10 16:33:20

我想離開文本第一和測試右第二 –

@pawankotak更新了答案 –

使用這樣的事情在你的CSS樣式表：

#UpScopeLinkTop, #ResultCount { 
    width: 45%; 
}

（根據需要調整數值）

PS：從#UpScopeLinkTop

來源

2017-02-10 16:32:57 Johannes

你不需要浮動。而不是大div內的div，使用跨度。

<div id="thebigdiv"> 
<span style="display:inline-block";> 
Text left 
</span> 
<span style="display:inline-block";> 
Text right 
</span> 
</div>

來源

2017-02-10 16:34:41

必須同時div的的display值從

display: block;

改變

display: inline;

，也需要從HTML代碼中刪除內嵌樣式。

您可以將相對定位應用於包含文本的兩個div元素。

#UpScopeLinkTop{ 
 
display: inline; 
 
    position:relative; 
 
    left: 70px; 
 
    
 
} 
 

 
#ResultCount{ 
 
    display: inline; 
 
    position:relative; 
 
    left: -75px; 
 
}

<div class="ms-srch-result" id="Result" name="Control"> 
 

 
    <div id="UpScopeLinkTop" class="ms-srch-upscope-top">       
 
    Text Right 
 
    </div> 
 

 
    <div id="ResultCount" class="ms-srch-resultscount">       
 
Text Left      
 

 
    </div> 
 

 
</div>

來源

2017-02-10 16:35:59 Yousaf

文本左第一和測試右第二 –

@pawankotak遺憾，錯過了。更新了我的答案。 – Yousaf

需要低於div第一位

回答

相關問題