连续对齐3列div不起作用

Question

JSFiddle

我在行div中嵌套3列以使它们水平对齐，并且社交媒体图标不会成为行的一部分。我放了width: 100%，float: left，尝试了不同的方法让3列直线排列 - 没有成功。

下图是我成功所需的目标。

HTML和CSS

＆＃13;

＆＃13;

p {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 14px;
}

h3 {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 27px;
}

.box {
  background-color: #f3f3f3;
  color: #fff;
  font-size: 150%;
  width: 100%;
}

.box .box {
  background-color: #f3f3f3;
  color: #444;
}

.placeholder {
  grid-column: col 3 / span 2;
  grid-row: row 2;
  display: grid;
}

.sm-stw {
  grid-column: 1;
  grid-row: 1;
  width: 573px;
}

.stw-box {
  border: solid 1px #ff0000;
  width: 75%;
  margin: 0 auto;
  padding: 0 auto;
}

div.vertical-line {
  width: 1px;
  background-color: #979797;
  height: 100%;
  float: left;
  margin: 0 15px 0 15px;
}

.sm-svrs {
  grid-column: 2;
  grid-row: 1;
  text-align: left;
}

.sm-hashtag-stw {
  grid-column: 1/3;
  grid-row: 2;
  text-align: center;
}

＆＃13;

<div class="box placeholder">
  <div class="box sm-stw">
    <div class="stw-box">

      <div class="col">
        <div class="sm-icon"><img src="imgs/icon-fb.png" alt="Seek the World | Facebook"></div>
        <div class="sm-logo"><img src="imgs/icon-ins.png" alt="Seek the World | Instagram"></div>
      </div>

      <div class="col">
        <div class="vertical-line" style="height: 75px;"></div>
      </div>

      <div class="col">
        <h3>Seek the World</h3>
        <p>(short content place here)</p>
      </div>

    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我清理了一下你的css代码，我用flex替换了网格。还有很多我认为没用的东西，所以我把它们删除了。

正如@hungerstar在评论中所说，你可以设置一个边框到一个col，并添加一个小填充来制作垂直线。 这种方式更好，因为它不会污染html。

检查代码，告诉我你需要更多解释！

$('#removeGrayMargin').on('click', function(){

  if(!$(this).hasClass('active')) {
    $(this).text('Put back gray margins');
    $(this).addClass('active');
    $('.main-container').addClass('with-margin');
  }else {
    $(this).text('Remove the gray margin');
    $(this).removeClass('active');
    $('.main-container').removeClass('with-margin');
  }
  
});

.main-container {
  background-color: #f3f3f3;
  color: #444;
  font-size: 150%;
	width: 100%;
}

.box {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid 1px #ff0000;
	width: 75%;
	margin: 0 auto;
	padding: 30px 0;
}

.main-container.with-margin {
  background: transparent;
}

.main-container.with-margin  .box{
  background: #f3f3f3;
}

.col-1 {
  width: 30%;
  text-align: right;
  padding-right: 20px;
}

.col-2 {
  width: 70%;
  border-left: 1px solid #8C8C8C;
  padding-left: 20px;
}

.col-2-title,
.col-2-p {
  font-family: 'Source Sans Pro', sans-serif;
}

.col-2-p  {
	font-size: 14px;
  margin-top: 0;
}

.col-2-title{
  font-size: 27px;
  margin-top: 5px;
  margin-bottom: 20px;
}

.sm-logo + .sm-logo{
  margin-top: 8px;
}

img {
  /* Trick to remove the white space under the image */
  vertical-align: middle;
}

button {
  border-radius: 0;
  background: #262626;
  color: white;
  border: 0;
  padding: 10px;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-container">
  <div class="box">
      <div class="col-1">
        <div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-facebook.png" alt="Seek the World | Facebook" width="25px"></div>
        <div class="sm-logo"><img src="http://www.sorensonvrs.com/assets/images/svrsv2/logo-instagram.png" alt="Seek the World | Instagram" width="25px"></div>
			</div>
			<div class="col-2">
				<h3 class="col-2-title">Seek the World</h3>
				<p class="col-2-p">(short content place here)</p>
			</div>
		</div>
</div>

<p>
Bonus because i don't know if you want exactly your image, or if you want the gray margin as your js fiddle.
</p>
<button id="removeGrayMargin">Remove the gray margin</button>