位置2 divs彼此相鄰

Question

我的div里面有一個html，如下所示，

<div class="mainBlock">
    <div style="display: inline-block"> 
        <span>This Text-1 may be a bit lengthy</span>
    </div>

    <div style="display: inline-block;margin-left:50px">                    
        <span>This Text-2 may be a bit lengthy</span>
    </div>
</div>

以下是我在UI上的外觀：

它有足夠的空間來擴展。 問題是，如果第一個div中的文本很短，則右邊的div會向左移動（這很明顯）

現在，我需要的是左側div應該采取一些固定的寬度，以便右側div總是位於某個固定位置。

請告知需要進行的更改。

PS我想避免給出固定寬度。 我嘗試給每個div提供50％的寬度，但它沒有多大幫助。

Answer 1

正如我的評論和這個jsFiddle所示

使用box-sizing: border-box; 將解決你的很多問題，你可以在這里閱讀更多相關信息： Box Sizing Border Box FTW - Paul Irish

使用50％的寬度，浮動和清理浮子將完美地完成並且也將響應（移動設備，平板電腦）。

 * { margin: 0; padding: 0; box-sizing: border-box; } .row:after { display: table; content: ''; clear: both; } .column { float: left; width: 50%; border: 1px solid red; } 

 <div class="row"> <div class="column">Content, al lot of content. LOTS of content. Wow, this is asdf asd asd asd</div> <div class="column">Content</div> </div> 

Answer 2

你可以使用flexbox ...也許會解決你的問題。 我使用成長技術。

CSS

.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
}
.flex-item {
    -webkit-flex: none;
    flex: none;
    background: #f1f1f1;
}
.flex-item:nth-child(2) {
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    padding-left: 10px;
}

HTML

<div class="flex-container">
    <div class="flex-item">This Text-1 may be a bit lengthy</div>
    <div class="flex-item">This Text-2 may be a bit lengthy</div>
</div>

在這里演示

Answer 3

試試以下代碼：

<div class="mainBlock">
    <div style="display: inline-block;min-width:200px"> 
        <span>This Text-2 may be a bit lengthy</span>
    </div>

    <div style="display: inline-block;margin-left:50px">                    
        <span>This Text-2 may be a bit lengthy</span>
    </div>
</div>

這是一個小提琴 。

Answer 4

您可以根據需要使用display: inline-block或float: left

內聯塊方式：

.mainBlock > div {
    width: calc(50% - 2px);
    display: inline-block;    
}

我使用了一個calc(50% - 2px)因為出於某種原因你使用width: 50% div會出現在不同的行中，因為瀏覽器會在你的html文件中的每個div之間渲染空格，然后它們沒有足夠的空間（我認為這就是原因。如果你使用javascript構建你的html內容，你可以使用with: 50%它會起作用，因為div元素之間沒有空格。

浮動方式：

.mainBlock > div {
    width: 50%;
    float: left;
}

您也可以使用display：flex但它在IE9 / IE10中不起作用

希望有所幫助

Answer 5

你應該浮動兩個divs left style="float:left"而不是使用內聯塊屬性，並使用你在html中使用的相同margin屬性。

而不是使用內聯css嘗試使用外部或嵌入式CSS樣式。

Answer 6

為什么不使用基於百分比的寬度或min-width ？

我認為百分比寬度可以正常工作。

http://codepen.io/anon/pen/MaOgmx

Answer 7

你可以添加固定與兩個div，並添加浮動左側所有div。 它將幫助您實現您想要的。

<div class="mainBlock" style="float: left;">
    <div style="width: 500px; float: left;"> 
        <span>This Text-1 may be a bit lengthy</span>
    </div>

    <div style="width: 500px; float: left;">                    
        <span>This Text-2 may be a bit lengthy</span>
    </div>
</div>