Question

我正在尝试设计一个响应式网页，所以我试图避免使用像素值。但有时，例如当试图限制包含div的文本的宽度时，我不能使用百分比，因为contianer的宽度是未知的并且将由内部的内容决定。由于CSS的工作方式，我不能在html层次结构中引用更高的容器div给出宽度值。

所以我考虑使用vw，但由于我在主体上使用min-width，max-width值，因此在这些值之外它将无法正常工作。我可以用什么来代替身体宽度？

修改

由于要求提供一个例子，我在下面提供了一个例子，其中百分比不起作用。试图使跨度宽度的10％的跨度宽度没有运气。以下是jsfiddle链接：https://jsfiddle.net/68ha60p6/

dev: {
          options: {
            'force': true
          },
          expand: true,
          cwd: '//someserver/someshare/somepath',
          src: '{,*/}*'
        },

html,body{
  width:100%;
  height:100%;
  padding:0;
  margin:0;
  }

Answer 1

参考容器div更高，我不能给出宽度值在html层次结构中。

你绝对可以。

看一下下面的例子。

您将看到父容器的宽度未明确说明（它由第一个子容器的内容决定）。无论如何，第二个子容器的宽度是其父级的50%。

＆＃13;

div {
margin: 6px;
padding: 6px;
}

.container {
display: inline-block;
border: 1px solid rgb(255,0,0);
}

.subcontainer1 {
border: 1px solid rgb(0,0,255);
}

.subcontainer2 {
width: 50%;
margin: 6px;
border: 1px solid rgb(0,255,0);
}

div p {
line-height: 60px;
}

＆＃13;

<div class="container">

<div class="subcontainer1">
<p>I am a long sentence and I will define the width both of this sub-container and of the overall parent container.
</div>

<div class="subcontainer2">
<p>I am half the width of the overall parent container.</p>
</div>

</div>

＆＃13;

替代vh和vw

1 个答案: