Question

我需要将我的span放在div中，但因为div的内容更多，所以它溢出了父div的边界。怎么解决？我的外部div应该是灵活的，因为span中的内容是动态的。这是plunker link = DEMO

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

Answer 1

您需要在<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>

之后添加新元素

.clear {
    clear: both
}

并在CSS中添加以下内容

\s*

Answer 2

将outerDiv设置为/* Styles go here */ .outerDiv { width:100%; border:2px solid black; display: inline-block; } .div40 { width:40%; } .div60 { width:60%; float:right; }

＆＃13;

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

＆＃13;

df = pd.DataFrame({'Color':'Red Red Blue Red Violet Blue'.split(), 
                   'Value':[11,150,50,30,10,40]})
print (df)
    Color  Value
0     Red     11
1     Red    150
2    Blue     50
3     Red     30
4  Violet     10
5    Blue     40

a = df.Color.value_counts()
print (a)
Red       3
Blue      2
Violet    1
Name: Color, dtype: int64

#get top 2 values of index
vals = a[:2].index
print (vals)
Index(['Red', 'Blue'], dtype='object')

＆＃13;

Answer 3

通过将显示内联块添加到外部div类，您可以实现它。

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

Answer 4

转移到流体内容... bootstrap。

Map(
Columbus Herzog -> 
 Map(
 0 -> Map(source -> Las Cruces Crawford Arpt (LRU), amount -> 5000.0, points -> 500, date_time -> Sat Feb 13 02:18:14 IST 2016, class -> First, destination -> San Luis Arpt (IPI)), 
 1 -> Map(source -> Las Cruces Crawford Arpt (LRU), amount -> 5000.0, points -> 500, date_time -> Fri Jul 22 01:52:19 IST 2016, class -> First, destination -> San Luis Arpt (IPI)), 
 2 -> Map(source -> Las Cruces Crawford Arpt (LRU), amount -> 5000.0, points -> 500, date_time -> Wed Jan 06 06:24:50 IST 2016, class -> First, destination -> San Luis Arpt (IPI)), 
 3 -> Map(source -> Las Cruces Crawford Arpt (LRU), amount -> 5000.0, points -> 500, date_time -> Tue May 17 17:12:16 IST 2016, class -> First, destination -> San Luis Arpt (IPI))
 )
)

如何在div中放入溢出的span

4 个答案: