Question

我有这个，它做了我想要的一切，但在我看来，有一种方法可以做到这一点，以便我可以从所有其他相同的属性中分别控制div的高度。我还没有能够通过我的搜索找到一种对我有意义的方法。

注意我大约需要3天的html，所以如果这个过于复杂，我会按照我理解的步骤学习。我理解样式表来简化过程，所以看起来会有更简单的方法。

由于

<style type="text/css">
    body
    {

        width:1240px;
        border:solid 1px black  
    }

    .rightline1{float:right;width:618px;height:80px;border:solid 1px black;}
    .rightline2{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline3{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline4{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline5{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline6{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline7{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline8{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline9{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline10{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline11{float:right;width:618px;height:20px;border:solid 1px black;}
    .rightline12{float:right;width:618px;height:20px;border:solid 1px black;}
    .leftline1{float:left;width:618px;height:80px;border:solid 1px black;}
    .leftline2{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline3{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline4{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline5{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline6{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline7{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline8{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline9{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline10{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline11{float:left;width:618px;height:20px;border:solid 1px black;}
    .leftline12{float:left;width:618px;height:20px;border:solid 1px black;}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
    <div class="leftline1"></div>
    <div class="rightline1"></div>
    <div class="leftline2"></div>
    <div class="rightline2"></div>
    <div class="leftline3"></div>
    <div class="rightline3"></div>
    <div class="leftline4"></div>
    <div class="rightline4"></div>
    <div class="leftline5"></div>
    <div class="rightline5"></div>
    <div class="leftline6"></div>
    <div class="rightline6"></div>
    <div class="leftline7"></div>
    <div class="rightline7"></div>
    <div class="leftline8"></div>
    <div class="rightline8"></div>
    <div class="leftline9"></div>
    <div class="rightline9"></div>
    <div class="leftline10"></div>
    <div class="rightline10"></div>
    <div class="leftline11"></div>
    <div class="rightline11"></div>
    <div class="leftline12"></div>
    <div class="rightline12"></div>
</div>
</form>
</body>

Answer 1

我看到两个选项：

使用所有常见样式创建单独的规则，并应用于所有类，例如
```
.rightline1, .rightline2 (...) .rightLine12 { /* all current rules here */ } 
```
然后在必要时为单个类添加单独的规则。
另一个选项（对我来说更好）：既然你可以为一个元素分配任意数量的类，只需为常用样式添加一个额外的类。例如：

HTML：
```
<p class="rightline rightline1">Lorem ipsum</p>
```
CSS：
```
.rightline { /* all current rules here */ } 
.rightline1 { width: 200px; }
```

Answer 2

您可以在多个HTML元素上重用CSS类。例如，这两个CSS类完全相同：

.rightline2{float:right;width:618px;height:20px;border:solid 1px black;}
.rightline3{float:right;width:618px;height:20px;border:solid 1px black;}

所以这个类只能定义一次并在任何需要的地方使用。

类重用的示例（在两个div上使用相同的CSS类）：

<div class="rightline2"></div>
<div class="rightline2"></div>

Answer 3

首先，您可以像这样编写相同的CSS：

body {
    width:1240px;
    border:solid 1px black  
}

.rightline1, .rightline2, .rightline3, .rightline4, .rightline5, .rightline6, .rightline7, .rightline8, .rightline9, .rightline10, .rightline11, .rightline12{
    float:right;
    width:618px;
    height:20px;
    border:solid 1px black;
}
.leftline1, .leftline2, .leftline3, .leftline4, .leftline5, .leftline6, .leftline7, .leftline8, .leftline9, .leftline10, .leftline11, .leftline12 {
    float:left;
    width:618px;
    height:20px;
    border:solid 1px black;
}

这样有点清洁。但听起来你想巩固所有这些右线和左线。所以这会更好：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        body {
            width:1240px;
            border:solid 1px black  
        }

        .rightline, .leftline {
            width:618px;
            height:20px;
            border:solid 1px black;
        }

        .rightline {
            float:right;
        }
        .leftline {
            float:left;
        }
</style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
            <div class="leftline"></div>
            <div class="rightline"></div>
        </div>
    </form>
</body>

在原始代码中，您使用的是更像Ids的类。如果您有类似<div id='abc'></div>的内容，那么这意味着页面上的任何其他元素都不会（嗯，不应该），其内容为abc。 Ids是独一无二的。

另一方面，类用于标识元素组。因此，不应给每个人一个独特的课程，而应该给他们类似的课程。在我的上一个示例中，我提供了.rightline和.leftline个共享样式。因为，除浮动方向外，它们是相同的。然后我给每个人自己的漂浮方向。

编辑我更新了最后一个示例以获得适当的缩进：）

CSS和父/子，继承属性语法和可能性

3 个答案: