У меня возникли проблемы с встроенным блоком и пробелами и CSS

Question

Это была репозиция, потому что я ужасно напортачил первый пост. Я прошу прощения за это. Итак, у меня есть два встроенных блока DIV, и я хочу, чтобы они появлялись рядом друг с другом, но я также хочу, чтобы текст внутри блоков работал правильно. Как видно из демонстрации, текст в блоке2 происходит за пределами текста в блоке 1. Я не вставляю CSS здесь, как в скрипте.

#container { 
 
    border: 1px solid green; 
 
    width: 35%; 
 
    white-space: nowrap 
 
} 
 
#box1, 
 
#box2 { 
 
    border: 2px blue solid; 
 
    display: inline-block; 
 
    white-space: normal 
 
} 
 
#box2 { 
 
    white-space: normal 
 
}

<DIV id="container"> 
 
    <DIV id="box1"> 
 
    Box1 
 
    </DIV> 
 
    <DIV id="box2"> 
 
    Box2 More Box2 and More 
 
    </DIV> 
 
</DIV>

Благодаря

Answer 1

Вы должны установить ширину на обоих дочерних элементов, чтобы ограничить текст внутри него, смотрите пример ниже:

#container {width:35%;white-space:nowrap; background: teal;} 
 
#box1, #box2 {width: 30%; display:inline-block;white-space:normal; background: aqua;} 
 
#box2 {width: 70%; white-space:normal; background: aqua;}

<div id="container"> 
 
    <div id="box1">Box1</div> 
 
    <div id="box2">Box2 More Box2 and More</div> 
 
</div>

Answer 2

Вы можете использовать display:flex на контейнере.

Вот jsfiddle пример https://jsfiddle.net/c6y2dn4d/1/

#container { 
 
    border: 1px solid green; 
 
    width: 35%; 
 
    white-space: nowrap; 
 
    display: flex 
 
} 
 
#box1, 
 
#box2 { 
 
    border: 2px blue solid; 
 
    display: inline-block; 
 
    white-space: normal 
 
} 
 
#box2 { 
 
    white-space: normal; 
 
    margin-left: 5px 
 
}

<DIV id="container"> 
 
    <DIV id="box1"> 
 
    Box1 
 
    </DIV> 
 
    <DIV id="box2"> 
 
    Box2 More Box2 and More 
 
    </DIV> 
 
</DIV>

Answer 3

будет ли это то, что вы ищете? https://jsfiddle.net/gwzn3ek3/

<DIV id="container"> 
    <DIV id="box1"> 
     Box1 
    </DIV><DIV id="box2"> 
     Box2 More Box2 and More 
    </DIV> 
</DIV> 

В принципе, вы не можете иметь пробелов между два рядными блоком разметкой, так как она будет генерировать небольшое расстояние между ними.

Answer 4

Использование Javascript для этого перейдите на скрипку и добавить яваскрипту часть к нему

var box1 = document.getElementById("box1").offsetWidth; 
var box2 = document.getElementById("box2").offsetWidth; 
var newWidth = box2 + box1 +"px"; 
document.getElementById("container").style.width=newWidth; 

Это должно работать. Надеюсь, что я мог бы помочь вам

Answer 5

Это кажется <table> мне ...

Попробуйте что-то вроде этого:

#container { 
 
    border: 1px solid green; 
 
    width: 35%; 
 
    white-space: nowrap; 
 
    display: table; 
 
} 
 
#box1, 
 
#box2 { 
 
    border: 2px blue solid; 
 
    display: table-cell; 
 
    white-space: normal; 
 
}

<DIV id="container"> 
 
    <DIV id="box1"> 
 
    Box1 
 
    </DIV> 
 
    <DIV id="box2"> 
 
    Box2 More Box2 and More 
 
    </DIV> 
 
</DIV>