编辑：

Question

我正在尝试安排主页的布局。我想要的是我的div #welcome成为中心，其他四个div跨越2和2两侧。这个网站有一个很好的例子，说明了我的拍摄方式。我现在所拥有的是5个div工作和装配相对较好，除了他们没有妥善安排。我知道我在HTML中调用div的顺序会改变它们出现的顺序，但是当我重新安排它时，它们就会混乱。

当我有这样的HTML时，我会在#welcome的左边看到一个，在右边看到三个（下图）：

<div id = "HomeMain">
        <div id = "Entertainment">
            <img src="images/Entertainment1.jpg" id="EntSlide" width=185 height=95/>
        </div>
        <div id="welcome">
            <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p>
            <div class = "Oldman"></div> 
        </div>
        <div id = "Community">
            <img src="images/Victoria1.jpg" id="ComSlide" width=185 height=95/>
        </div>
        <div id = "Events">
            <img src="images/Events1.jpg" id="EventSlide" width=185 height=95/>
        </div>
        <div id = "Distillery">
            <img src="images/Distillery1.jpg" id="DistSlide" width=185 height=95/>
        </div>
</div>

right

当我把这样的HTML放在右边时，我会得到#welcome，左边是另外四个（下图）

<div id = "HomeMain">
        <div id = "Entertainment">
            <img src="images/Entertainment1.jpg" id="EntSlide" width=185 height=95/>
        </div>
        <div id = "Community">
            <img src="images/Victoria1.jpg" id="ComSlide" width=185 height=95/>
        </div>
        <div id="welcome">
            <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p>
            <div class = "Oldman"></div> 
        </div>
        <div id = "Events">
            <img src="images/Events1.jpg" id="EventSlide" width=185 height=95/>
        </div>
        <div id = "Distillery">
            <img src="images/Distillery1.jpg" id="DistSlide" width=185 height=95/>
        </div>

left

这是CSS

#HomeMain{
width: 100%;
float: left;
overflow:hidden;
margin:auto auto;
padding:10px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}

#Entertainment, #Community, #Events, #Distillery{
float: left;
width: 26%;
height: 190px;
margin: 1px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}
#welcome{
float: left;
width:45%;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px 5px 5px 5px;
font-weight: bold;
box-sizing:border-box;
}
img{
display:block;
margin: 0 auto;
}

Answer 1

这是问题所在。您需要在div中包含两个较小的框，然后float这些div。请参阅此HTML：

<div id = "HomeMain">
        <div id="left-col">
            <div id="Entertainment"></div>
             <div id="Community"></div>
        </div><!-- #left-col-->
        <div id="welcome">
            <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p>
        <div class = "Oldman"></div> 
        </div><!-- #welcome-->

    <div id="right-col">
        <div id = "Events"></div>
        <div id = "Distillery"></div>
    </div><!-- #right-col"-->
</div>

这是 CSS

    #HomeMain{
    width: 100%;
    overflow:hidden;
    margin:auto auto;
    padding:10px;
    border-style: groove;
    border-width: 3px;
    border-colour: white;
    border-radius: 5px;
    box-sizing:border-box;
    }

    #left-col, #right-col {
        width:26%;
        float:left;
    }

    #right-col {
        float:right;
    }

    #Entertainment, #Community, #Events, #Distillery{
    width: 100%;
    height: 190px;
    margin: 1px;
    border-style: groove;
    border-width: 3px;
    border-colour: white;
    border-radius: 5px;
    box-sizing:border-box;
    background-color:yellow;
    }
    #welcome{
    float: left;
    width:45%;
    border-style: groove;
    border-width: 3px;
    border-color: white;
    border-radius: 5px;
    font-weight: bold;
    box-sizing:border-box;
    }
    img{
    display:block;
    margin: 0 auto;
}

小提琴： http://jsfiddle.net/67oqxe9f/1/

Answer 2

编辑：

很抱歉以前没有正确理解你的要求（所以删除了答案）：这里是你需要的演示 http://jsfiddle.net/j4nrn2sb/

HTML：

<div id = "HomeMain">
    <div id="left_div">
        <div id = "Entertainment">
            <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="EntSlide" width="185" height="95"/>
        </div>
        <div id = "Community">
            <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="ComSlide" width="185" height="95"/>
        </div>
    </div>
    <div id="center_div">
        <div id="welcome">
            <p>Finest Booze around, come taste for yourself Home to many of Toronto's hottest designer boutiques, unique cafes, artisan shops, breathtaking art galleries, performance venues and award-winning restaurants, The Distillery District is the place to see and be seen. An internationally acclaimed pedestrian-only village, The Distillery features more than 70 ground-floor cultural and retail establishments in the restored red brick, Victorian-era buildings of the renowned Gooderham & Worts whiskey distillery. One of Canada's hottest tourist attractions, centrally-located and just a short walk from downtown Toronto there is always something happening at The Distillery.</p>
            <div class = "Oldman"></div> 
        </div>
    </div>
    <div id="right_div">
        <div id = "Events">
            <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="EventSlide" width="185" height="95"/>
        </div>
        <div id = "Distillery">
            <img src="http://www.brightlinkprep.com/wp-content/uploads/2014/04/sample.jpg" id="DistSlide" width="185" height="95"/>
        </div>
    </div>
</div>

CSS：

#HomeMain{
width: 100%;
float: left;
overflow:hidden;
margin:auto auto;
padding:10px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}

#Entertainment, #Community, #Events, #Distillery{
float: left;
width: 100%;
height: 190px;
margin: 1px;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}
#welcome{
float: left;
width:100%;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px 5px 5px 5px;
font-weight: bold;
box-sizing:border-box;
}
img{
display:block;
margin: 0 auto;
}

#left_div, #right_div
{
    width:26%;
    float:left;
    border:solid 1px red;
}

#center_div
{
   width:45%;
    float:left;
    border:solid 1px blue;
}

Div安排HTML / CSS

2 个答案:

编辑：