Css两列带偏移中心

Question

嗨我目前左边有两个柱子，右边有两个柱子，其中有两行

但是我希望列的中心点向右偏移，因此左列约为60％，右列为40％

这是我正在使用的html和css

@import url(http://fonts.googleapis.com/css?family=Lora:700);
 .container {
  width: 75%;
  margin: auto;
}
.titleheader {
  text-align: center;
  margin-top: 5px;
  font-size: 70px;
  font-family: 'Lora', serif;
  border-bottom: 3px solid #000;
  width: 56%;
  margin: auto;
}
.midcontainer {
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2;
  margin-top: 20px;
}
.top {
  margin-bottom: 15px;
}
.bottom {} .rightsection {} .leftsection {
  display: inline-block;
}
.memo {}

<div class="container">
  <div class="titleheader">
    <?php echo $this->Accountname; ?></div>
  <div class="midcontainer">
    <div class="leftsection">
      <div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
      <div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>

    <div class="rightsection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

  </div>
  <div class="memo"></div>


</div>

Answer 1

尽管我喜欢它们，但您无法独立设置CSS列的宽度。但是，您可以使用CSS表格获取您正在寻找的布局：

.midcontainer {
    display:table;
    border-spacing: 50px;
    border-collapse: separate;
}
.leftsection, .rightsection{
    display:table-cell;
}
.rightsection {
    width:40%
}

＆＃13;

＆＃13;

@import url(http://fonts.googleapis.com/css?family=Lora:700);
.container{
width: 75%;
margin: auto;
  border:1px dotted #ccc;
}

.titleheader{
text-align: center;
margin-top: 5px;
font-size: 70px;
font-family: 'Lora', serif;
border-bottom: 3px solid #000;
width: 56%;
margin: auto;
}

.midcontainer {
    display:table;
    border-spacing: 50px;
    border-collapse: separate;
}
.leftsection, .rightsection{
    display:table-cell;
}
.rightsection {
    width:40%
}


.top{
    margin-bottom: 15px;
}
.bottom{

}




.memo{

}

＆＃13;

 <div class="container">
<div class="titleheader">Invalid Account Number</div>
<div class="midcontainer">
    <div class="leftsection">
        <div class="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
        <div class="bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </div>

    <div class="rightsection">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</div>
<div class="memo"></div>

＆＃13;

＆＃13;

＆＃13;