Как поместить переполненный пролет внутри div

-1

Мне нужно поместить мой пролет внутри div, но поскольку содержимое div больше, оно переполнено из границы родительского div. Как это решить? Мой внешний div должен быть гибким, поскольку содержимое в промежутке динамическое. Вот ссылка plunker = DEMO Как поместить переполненный пролет внутри div

.outerDiv { 
 
    width: 100%; 
 
    border: 2px solid black; 
 
} 
 
.div40 { 
 
    width: 40%; 
 
} 
 
.div60 { 
 
    width: 60%; 
 
    float: right; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body> 
 
    <h1>Hello Plunker!</h1> 
 
    <div class="outerDiv"> 
 
    <span class="div40"> 
 
     hello 
 
    </span> 
 
    <span class="div60"> 
 
     hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic. 
 
    </span> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2016-08-23 RHUL

вы определили 'поплавка: right' к вашему' div60' то, почему этот вопрос встречающийся, все, что вам нужно, чтобы очистить 'float' как:' .outerDiv :: после .outerDiv :: до того {content: ""; display: table; } .outerDiv :: after {clear: both; } ' – vivekkupadhyay

Добавьте' overflow: auto; 'в свой внешнийDiv. – KunJ

@KunJ Во-первых, ваше решение для «Try» не подходит для этой цели. Во-вторых, предлагаемые здесь решения должны быть краткими, ясными и полезными, а не «Try». –

установить outerDiv в display: inline-block

/* Styles go here */ 
 

 
.outerDiv 
 
{ 
 
    width:100%; 
 
    border:2px solid black; 
 
    display: inline-block; 
 
} 
 
.div40 
 
{ 
 
    width:40%; 
 
} 
 
.div60 
 
{ 
 
    width:60%; 
 
    float:right; 
 
}

<h1>Hello Plunker!</h1> 
 
    <div class ="outerDiv"> 
 
     <span class = "div40"> 
 
     hello 
 
     </span> 
 
     <span class = "div60"> 
 
     hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic. 
 
     </span> 
 
    </div>

источник

2016-08-23 11:30:03 z0mBi3

Добавляя встроенный блок дисплея внешнего класса сНа вы можете Добейся этого.

/* Styles go here */ 
 

 
.outerDiv 
 
{ 
 
    width:100%; 
 
    border:2px solid black; 
 
    display:inline-block; 
 
} 
 
.div40 
 
{ 
 
    width:40%; 
 
} 
 
.div60 
 
{ 
 
    width:60%; 
 
    float:right; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body> 
 
    <style>.outerDiv span{}</style></style> 
 
    <h1>Hello Plunker!</h1> 
 
    <div class ="outerDiv"> 
 
     <span class = "div40"> 
 
     hello 
 
     </span> 
 
     <span class = "div60"> 
 
     hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic. 
 
     </span> 
 
    </div> 
 
    </body> 
 

 
</html>

источник

2016-08-23 11:30:53

Вам нужно добавить новый элемент после div60

<div class ="outerDiv"> 
    <span class = "div40"> 
    hello 
    </span> 
    <span class = "div60"> 
    hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic. 
    </span> 
    <div class="clear"></div> 
</div>

и добавьте следующий код в ваш CSS

.clear { 
    clear: both 
}

источник

2016-08-23 11:32:09

Вместо добавления * DOM * вы можете ссылаться на него, чтобы перейти на ** метод псевдо clearfix ** для очистки этого 'float' – vivekkupadhyay

Не уверен, что браузеру необходимо поддерживать OP, добавив, что div является самым безопасным. –

Переход к содержанию жидкости ... самозагрузки.

<!DOCTYPE html> 
<html> 
    <head> 
    <link rel="stylesheet" href="style.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/> 
    </head> 

    <body> 
    <h1>Hello Plunker!</h1> 
    <div class="container"> 
     <div class="row"> 
     <div class="col-md-4"> 
     hello 
     </div> 
     <div class="col-md-8"> 
     hello i am trying to insert this content inside the parent div,but i am not able to do so. My content should be inside the border of this div and i want the height not to be fixed as my content is dynamic. 
     </div> 
     </div> 
    </div> 
    </body> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://getbootstrap.com/dist/js/bootstrap.min.js"></script> 
    <script src="https://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script> 
</html>

источник

2016-08-23 12:20:51 mrheroux

Как поместить переполненный пролет внутри div

ответ

Смежные вопросы