Html 将2个div放置在彼此相邻的位置

我把我的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>

这个文本-1可能有点长
这篇课文-2可能有点长

以下是它在我的UI上的外观：

它有很大的扩展空间。 问题是，如果第一个div中的文本很短，那么右div就会向左移动（这很明显）

现在，我需要的是左边的div应该有一个固定的宽度，这样右边的div将始终位于某个固定的位置

请告知需要进行的更改

---

另外，我想避免给出固定的宽度。我试着给每个div指定50%的宽度，但没有多大帮助。

不要使用内联块属性，应该将两个

div都向左浮动
style=“float:left”
并使用html中使用的相同
margin
属性

尝试使用外部或嵌入式css样式，而不是使用内联css
 为什么不使用基于百分比的宽度，或
最小宽度

我认为百分比宽度可以

您可以向两个div添加fixed with，也可以向所有div添加float left。它将帮助你实现你想要的

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


这个文本-1可能有点长
这篇课文-2可能有点长
尝试以下代码：

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


这篇课文-2可能有点长
这篇课文-2可能有点长

这是一个。
如我的评论和本文所示

使用
框大小：边框框
将解决您的许多问题，您可以在此处阅读更多信息：

使用50%的宽度，浮动和清除浮动会非常好，并且会产生响应（手机、平板电脑）


*{
保证金：0；
填充：0；
框大小：边框框；
}
.罗：之后{
显示：表格；
内容：''；
明确：两者皆有；
}
.栏目{
浮动：左；
宽度：50%；
边框：1px纯红；
}

内容，很多内容。很多内容。哇，这是asdf asd asd asd asd
内容
您可以使用…也许可以解决您的问题。我使用这种技术

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>


这个文本-1可能有点长
这篇课文-2可能有点长

您可以根据需要使用
显示：内联块
或
浮动：左

内联块方式：

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

我使用了
calc（50%-2px）
，因为出于某种原因，如果使用
width:50%
，div将显示在不同的行中，因为浏览器在html文件中的每个div之间呈现空白，然后它们没有足够的空间（我认为这就是原因。如果您使用javascript构建html内容，您可以将
与：50%
一起使用，它会工作，因为div元素之间没有空格）

浮动方式：

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

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

希望这有帮助
为什么不提供50%的宽度帮助？使用最小宽度，否则您总是会对宽度进行某种更改为什么这么多答案被标记下来（-1）.我想不是所有的都应该得-1。@a.R.关于这个原因，请参阅。可能是的副本，但您没有清除任何浮动。.页面的其余部分会立即中断