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>

以下是我在用户界面上的显示方式：

它有足够的空间来扩展。问题是，如果第一个div中的文本很短，则右边的div会向左移动（这很明显）

现在，我需要的是左侧div应采用一些固定宽度，以便右侧div始终位于某个固定位置。

请告知需要进行的更改。

P.S。我想避免给出固定的宽度。我尝试给每个div增加50％的宽度，但它没有多大帮助。

Answer 1

如我的评论及此jsFiddle

所示

使用box-sizing: border-box;会解决很多问题，您可以在此处详细了解：Box Sizing Border Box FTW - Paul Irish

使用50％的宽度，浮动和清除花车将完美无缺，并且也会起作用（手机，平板电脑）。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

您可以使用flexbox ...也许可以解决您的问题。我使用grow技术。

<强> 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>

<强> DEMO HERE

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>

这是fiddle。

Answer 4

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

内联阻止方式：

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

我使用了calc(50% - 2px)，因为出于某种原因，如果使用width: 50%，div会出现在不同的行中，因为浏览器会在html文件中的每个div之间渲染空格，然后它们就不够了space（我认为这就是原因。如果你使用javascript构建你的html内容，你可以使用with: 50%并且它会起作用，因为div元素之间没有空格。）

浮动方式：

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

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

希望有所帮助

Answer 5

不应使用内联块属性，而应将divs向左浮动 style="float:left"并使用您在html中使用的相同margin属性。

不使用内联css尝试使用外部或嵌入式CSS样式。

Answer 6

为什么不使用基于百分比的宽度，或min-width？

我认为百分比宽度可以正常工作。

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

Answer 7

你可以在两个div中添加fixed，并向所有div添加float。它将帮助您实现您想要的目标。

<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>

位置2 divs彼此相邻

7 个答案: