Question

我有一系列div，我试图让它们全部停留在一个主容器中，这样它们就可以像块一样移动。如何编写CSS以将所有这些容器绑定到一个包装器？所有这些系列的div，容器，容器1，容器2都需要在彼此之下，最多可以有6个。

我的HTML是：

<div id='maincontainer'>
    <div class="photo"><image1.jpg"/></div>
    <div class="title" style="">title</div>
    <div class="desc"><p >You & I </p><p>some text here</p></div>
    <div><a href="#" class="btn">button</a></div>
    <div><a href="#" class="btnlink">text</a></div>
</div>

<div id='maincontainer2'>
    <div class="photo"><image1.jpg"/></div>
    <div class="title" style="">title</div>
    <div class="desc"><p >You & I </p><p>some text here</p></div>
    <div><a href="#" class="btn">button</a></div>
    <div><a href="#" class="btnlink">text</a></div>
</div>

<div id='maincontainer3'>
    <div class="photo"><image.jpg"/></div>
    <div class="title" style="">title</div>
    <div class="desc"><p >You & I </p><p>some text here</p></div>
    <div><a href="#" class="btn">button</a></div>
    <div><a href="#" class="btnlink">text</a></div>
</div>

Answer 1

把它放在另一个div中。仅仅为了更清洁的代码，我的建议是：如果您有多个容器，它们基本上包含相同的元素（它们包含相同类型的信息或具有与主容器中相同的堆积），那么它的清洁'使用一个班级。如果它们必须彼此不同，那么只需添加一个id。

<强> HTML：

<div id="wrapper">
    <div class="maincontainer" id="number1">
        <div class="photo"><image1.jpg"/></div>
        <div class="title" style="">title</div>
        <div class="desc"><p >You & I </p><p>some text here</p></div>
        <div><a href="#" class="btn">button</a></div>
        <div><a href="#" class="btnlink">text</a></div>
    </div>

    <div class="maincontainer" id="number2">
        <div class="photo"><image1.jpg"/></div>
        <div class="title" style="">title</div>
        <div class="desc"><p >You & I </p><p>some text here</p></div>
        <div><a href="#" class="btn">button</a></div>
        <div><a href="#" class="btnlink">text</a></div>
    </div>

    <div class="maincontainer" id="number3">
        <div class="photo"><image.jpg"/></div>
        <div class="title" style="">title</div>
        <div class="desc"><p >You & I </p><p>some text here</p></div>
        <div><a href="#" class="btn">button</a></div>
        <div><a href="#" class="btnlink">text</a></div>
    </div>
</div>

<强> CSS：

div#wrapper {
    width : 500px; /* or whatever your wrapper's width needs to be */
}

div.maincontainer {
    float : left;
    width : 100%;
}

Answer 2

我终于有2个2个容器的html。我只需要有4个垂直排列。每个人。我不确定CSS有什么问题。标题名称

的文本

按键

<div class="container" id="cont2" style="width:300px; height:110px;border:1px solid grey">
  <div class="boxphoto" style="float: right;"><img src="http://image.jpg" style="width:160; height:100%; "/></div>
  <div class="boxtitle" style="color:#800104;font-size:14px">Title</div>
  <div class="boxdesc" style=";margin:0 auto;height:50%; text-align:center; "><p style="color: blue">name</p><p style="font-weight:bold">text</p></div>
  <a href="#" class="btnlink" style="float:left; margin-left:10px;margin-top:-10px;>button</a></div>

在一个主要包装器中组合几个div

2 个答案: