Question

我正在尝试将div宽度设置为由h1决定。因此标题可以是它想要的宽度，而段落只会与标题一样宽。

import numpy as np
import matplotlib.pyplot as plt
from scipy import interpolate
from matplotlib import pylab

day_sec=np.arange(0,86400,1) #24 hours in seconds
ydata=np.exp(-day_sec/30) #random ydata for example

remove_seconds=np.arange(43200,46800,1) #12-13:00 in seconds

last=len(remove_seconds)-1 

for i in range(len(day_sec)): #what I have tried to remove the data, but failed
  if (day_sec[i] >= remove_seconds[0]) and (day_sec[i] <= remove_seconds[last]):
    new_day_sec=np.delete(day_sec,[i],None)
    new_ydata=np.delete(ydata,[i],None)

f=interpolate.interp1d(new_day_sec,new_ydata) #not sure this is correct

我听说普通的html / css是不可能的。这是真的？如果是这样，解决方案会是什么样的？

Answer 1

我通常在内部包装器上使用width:0; min-width:100%;组合来实现此目的。您还需要通过浮动它或将其设置为div来折叠display:inline-block;的宽度。将h1保留在包装器之外以便它可以强制折叠宽度div的宽度非常重要。

＆＃13;

div {
  float: left;
  clear: left;
  margin-bottom: 1em;
}

p {
  width: 0;
  min-width: 100%;
}

h1, p {margin: 0;}

＆＃13;

<div>
  <h1>This is a test</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>

<div>
  <h1>This is a test with a very long title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>

<div>
  <h1>Short</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>

<div>
  <h1>This is a test with a title that is absurdly long with the hope that it will wrap in the final result.</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris</p>
</div>

＆＃13;

Answer 2

将div-s显示值设置为inline-block：

div {
    display: inline-block;
}

但由于h1的宽度为100％（是块元素），因此它将与其他父级一样宽。如果您希望标题不是100％宽度，那么也可以使其成为内联块：

h1 {
    display: inline-block;
}

示例：https://jsfiddle.net/cr29y1tc/32/

Answer 3

正如@Roland Ruul所说，我添加了一些颜色来想象inline-block是你需要做的事实。

https://jsfiddle.net/L5eyd4bv/2/

<div>
    <h1>Content goes here</h1>
    <p></p>
</div>

div {
    background-color: red;
    display: inline-block;
}

h1 {
    background-color: green;
}

让h1决定div宽度

3 个答案: