在 HTML + CSS 中对齐 div

Question

我正在尝试在第四个 div 中对齐三个 div，以创建类似于您在此页面上看到的内容：http://www.thedistillerydistrict.com/

我似乎无法让内部 div（#Entertainment、#Community、#welcome）在 #HomeMain div 内并排对齐

这是来自html

<div id = "HomeMain">
        <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 = "Entertainment">
            <img src="images/Entertainment1.jpg" id="EntSlide" width=125 height=70 />
        </div>
        <div id = "Community">
            <img src="images/Victoria1.jpg" id="ComSlide" width=125 height=70 />
        </div>
    </div>

这里是 CSS

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

#Entertainment #Community{
float: left;
width: 25%;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
}
#welcome{
float: left;
width:50%;
position: relative;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px 5px 5px 5px;
font-weight: bold;
padding:15px;
}

Answer 1

检查这个小提琴链接http://jsfiddle.net/hek7fLy2/

我所做的只是使用 box-sizing css 属性来实现所需的结果。此外，我假设您希望 2 个较小 div 中的图像居中，所以这会解决这个问题。

我没有更改您的 HTML 代码，但我只调整了一点 css 代码，包括拼写错误..

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

#Entertainment, #Community{
float: left;
width: 25%;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
box-sizing:border-box;
}
#welcome{
float: left;
width:50%;
position: relative;
border-style: groove;
border-width: 3px;
border-color: white;
border-radius: 5px 5px 5px 5px;
font-weight: bold;
padding:15px;
box-sizing:border-box;
}
img{
    display:block;
    margin: 0 auto;
}

Answer 2

您忘记了第二条规则中的逗号，为了使其正确，您必须使用box-sizing: border-box;。

#HomeMain {
  width: 100%;
  float: left;
  overflow: hidden;
  margin: 0 auto;
  padding: 5px;
  border-style: groove;
  border-width: 3px;
  border-colour: white;
  border-radius: 5px;
  box-sizing: border-box;
}
#Entertainment,
#Community {
  float: left;
  width: 25%;
  border-style: groove;
  border-width: 3px;
  border-colour: white;
  border-radius: 5px;
  box-sizing: border-box
}
#welcome {
  float: left;
  width: 50%;
  position: relative;
  border-style: groove;
  border-width: 3px;
  border-color: white;
  border-radius: 5px;
  font-weight: bold;
  padding: 15px;
  box-sizing: border-box
}

<div id="HomeMain">
  <div id="welcome">
    <p>
      Finest Booze around...
    </p>
    <div class="Oldman"></div>
  </div>
  <div id="Entertainment">
    <img src="http://dummyimage.com/125x70" id="EntSlide">
  </div>
  <div id="Community">
    <img src="http://dummyimage.com/125x70" id="ComSlide">
  </div>
</div>

Answer 3

检查这个fiddle

首先应该是

#Entertainment,#Community{

而不是

#Entertainment #Community{

接下来，为什么你的 div 没有对齐是因为你为 3 个 div 分别指定了 3px 的边框，这使得 div 跳转到下一行。所以，这里我为每个 div 使用了box-sizing: border-box 属性div。

试试吧..

Answer 4

<div id = "HomeMain">
        <div id="welcome">
            Finest Booze around

        </div>
        <div id = "Entertainment">
           Finest Booze around,
        </div>
        <div id = "Community">
            Finest Booze around,
        </div>
    </div>

css 使用显示属性

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

#Entertainment, #Community,#welcome{
width: auto;
border-style: groove;
border-width: 3px;
border-colour: white;
border-radius: 5px 5px 5px 5px;
    background:#ccc;
    display:inline-block;
}

小提琴

http://jsfiddle.net/tnmzo1gc/

Answer 5

CSS 中有错字

#Entertainment #Community{ 

应该是

#Entertainment, #Community{

我希望它能解决你的问题:) 如果没有，请详细说明一个问题。