固定大小的div？

Question

固定大小的div？

html

17

我想要一个正常的div作为我的文本主体，以及一堆大小均为150px * 150px的小div。我该怎么做？

- user34537

1

答案非常明确，以至于我认为你的问题可能还不止这些。你已经尝试了什么？你具体遇到了什么问题？你可能想把它们全部左浮动吗？ - BalusC

6个回答

11

除了将所需尺寸放入样式表中，您还可以在HTML代码中直接硬编码尺寸。

<div id="mainDiv">
    <div id="mydiv" style="height:150px; width:150px;">
    </div>
</div>

- Ralph The Mouf

以下是示例代码：<div id="maindiv"> <div id="myDiv" style="width:150px; height:150px;"> </div> </div> - Ralph The Mouf

8

这并不意味着它无效。如果你是一个完全的新手（由于这个问题似乎没有任何关于CSS的知识，他们可能是），那么在学习HTML时，这是一个可行的临时选项。 - johnnietheblack

1

这也可以是一个方便的策略，如果您想要自定义属于某个类别的div，但又不想影响该类别中的其他div。1990年代或逻辑和机智到一定程度？ - Ralph The Mouf

可能定制类别为div的最佳方法是在class中添加一个id：<div id="custom" class="mydiv">这样你就可以在id中指定你想要的自定义样式，并覆盖你不想要的class。如果你不了解css，硬编码也是不错的选择。 - Ralph The Mouf

顺便说一下，您不需要使用 style=""。 - Supercolbat

5

作为对Jonathan Sampson的回复，这是最好的方法，不需要清除div：

.container { width:450px; overflow:hidden }
.cube { width:150px; height:150px; float:left }

<div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>

- Midas

1

.myDiv { height: 150px; width 150px; }

<div class="mainDiv">
   <div class="myDiv"></div>
   <div class="myDiv"></div>
   <div class="myDiv"></div>
</div>

- Jason

2

如果他在问这个问题，他可能想要更多的细节。你可以在HTML中使用<div style="width:150px;height:150px"></div>来实现（不建议），或者像Jason说的那样，给你的div一个类名，比如<div class="myDiv">... - mpen

3

我正在回答原帖提出的问题。 - Jason

哈哈，是的，Jason回答了我的问题，我只需要知道高度是否存在并且是否适用于div。 - user34537

那么，为什么你没有选择我的答案作为回答你的问题的答案呢？甚至没有给它投票？哈哈...？ - Jason

0

你可以使用CSS设置

元素的height和width。

<style type="text/css">
.box {
     height: 150px;
     width: 150px;
}
</style>

这是您正在寻找的吗？

- mscccc

0

<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>

CSS：

.smallDiv { height: 150px; width: 150px; }

- switz

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sampson · Accepted Answer

这是一个相当简单的效果。实现这个效果的一种方法是在共同的父容器中放置浮动的 div 元素，并设置它们的宽度和高度。为了清除浮动元素，我们设置父元素的 overflow 属性。

<div class="container">
    <div class="cube">do</div>
    <div class="cube">ray</div>
    <div class="cube">me</div>
    <div class="cube">fa</div>
    <div class="cube">so</div>
    <div class="cube">la</div>
    <div class="cube">te</div>
    <div class="cube">do</div>
</div>

CSS的实现与上面第一段中概述的策略类似：

.container {
    width: 450px;
    overflow: auto;
}

.cube {
    float: left;
    width: 150px; 
    height: 150px;
}

你可以在这里看到最终结果：http://jsfiddle.net/Qjum2/2/

支持伪元素的浏览器提供了另一种清除浮动的方法：

.container::after {
    content: "";
    clear: both;
    display: block;
}

这里可以查看结果：http://jsfiddle.net/Qjum2/3/

希望能对您有所帮助。