Question

我试图在我的页面上对齐三个div，其中一个总是保持中心，而另一个则相等间距。我认为我需要的大部分代码我似乎无法让间距起作用。

＆＃13;

#Partnerships div { 
    height: 600px; 
    width: 100%; 
    margin-left: 10px; 
    margin-top: 10px;
    Padding: 10px;
    float: left; 
    background-color: #000000;
    color:#FFFFFF;
   border-radius: 15px 15px 15px 15px;
}

#Robe 
   {float:left;
    width:100px;}


#Avolites 
   {float:right;
    width:100px;}


#UKProductions 
   {margin:0 auto;
    width:100px;}

＆＃13;

<div id="Partnerships div">
<div id="Robe">
    <h1>Robe</h1>
        <p></p> 
            <a href="http://www.robe.cz/" target="_blank">
                <img src="" alt="RobeLogo" height="100" width="200" >
            </a>
</div>

<div id="Avolites">
    <h1>Avolites</h1>
        <p></p>
            <a href="" target="_blank">
                <img src="" alt="AvolitesLogo" height="100" width="200">
            </a>
</div>

<div id="UKProductions">
    <h1>UkProductions</h1>
        <p></p>
            <a href="" target="_blank">
                <img src="" alt="UkProductionsLogo" height="100" width="200">
            </a>
</div>

＆＃13;

Answer 1

您可以将此示例用作解决方案的指南：

Flexbox负责水平对齐。

#Partnerships {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
    background-color: lightgrey;
}

#Partnerships div {
    background-color: cornflowerblue;
    width: 300px;
    margin: 10px;
}

<div id="Partnerships">
<div id="Robe">
  <h1>Robe</h1>
  <a href="http://www.robe.cz/" target="_blank">
    <img src="" alt="RobeLogo" height="100" width="200" >
  </a>
</div>

<div id="Avolites">
  <h1>Avolites</h1>
  <a href="" target="_blank">
    <img src="" alt="AvolitesLogo" height="100" width="200">
  </a>
</div>

<div id="UKProductions">
  <h1>UkProductions</h1>
  <a href="" target="_blank">
    <img src="" alt="UkProductionsLogo" height="100" width="200">
  </a>
</div>
</div>

Answer 2

将此添加到以下代码：

{{1}}

对齐三个div

2 个答案: