html - 如何在css和html中左右设置一个div？

Question

我正在制作一个弹出窗口，其中设置了一个切换开关，该切换开关由纯 CSS 组成。现在在弹出窗口中有 2 个 div SOCIAL 和 MANUAL，它们左右对齐，并且在相应的显示/隐藏 div 上有反应:

这是我的问题: https://imgur.com/a/9TGnZlQ

我需要什么: https://imgur.com/a/bvMH1I9

我们想要的是像上面那样完美地对齐 SOCIAL 和 MANUAL div。

这是弹出窗口:

.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    opacity: 0;
    -webkit-transition: opacity 400ms ease-in;
    -moz-transition: opacity 400ms ease-in;
    transition: opacity 400ms ease-in;
    pointer-events: none;
}

.modalDialog:target,.modalDialog:hover {
    opacity: 1;
    pointer-events: auto;
}

.modalDialog>#__spookyPopup {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #fff);
    background: -o-linear-gradient(#fff, #999);
}

.profile_container {
    height: 160px;
    width: 400px;
    background: #ccc;
    display: inline-block;
}

.profile_div {
    height: 120px;
    width: 130px;
    margin-top: 20px;
    margin-left: 130px;
    background: #ddd;
    border: 1px solid grey;
}

.head_div {
    min-height: 12px;
    width: 100%;
}

.media_layer {
    margin-top: 20px;
    min-height: 12px;
    width: 400px;
    background: #;
    display: inline-block;
}

.manual {
    height: 50px;
    width: 197px;
    float: right;
    background: #;
    display: inline-block;
}

.manual:hover {
    border-bottom: 2px solid #ab0a72;
}

.social {
    height: 50px;
    width: 197px;
    background: #;
    display: inline-block;
}

.social:hover {
    border-bottom: 2px solid #ab0a72;
}

.social_link_container {
    height: 160px;
    width: 400px;
    background: #ccc;
    display: inline-block;
}

.fb_container {
    height: 50px;
    width: 340px;
    margin-top: 20px;
    margin-left: 30px;
    background: #ddd;
    border: 1px solid grey;
}

.clicker {
    display: inline-block;
    width: 100px;
    height: 50px;
    background-color: blue;
    color: #FFF;
}

.clicker.hidden {
    display: none;
}

.hiddendiv {
    height: 0px;
    background-color: green;
    overflow: hidden;
    transition: height 0.5s;
}

.hiddendiv.nr2 {
    background-color: red;
}

#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
    display: none;
}

#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
    display: inline-block;
}

#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
    height: 150px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
    <div id="__spookyPopup">
        <a href="#close" title="Close" class="close">X</a>

        <div class="profile_container">

            <div class="profile_div"></div>
        </div>
        <div class="head_div">
            <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;">
                <I>Hey, please login to access your private content.</I>
            </p>
        </div>

        <div class="media_layer">

            <div class="social">
                <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
            </div>


            <div class="manual">
                <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
            </div>


        </div>

        <div id="showdiv1"></div>
        <div id="showdiv2"></div>

        <div class="media_layer">
            <a href="#showdiv1" class="clicker social" tabindex="1">SOCIAL</a>
            <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

            <a href="#showdiv2" class="clicker manual" tabindex="2">MANUAL</a>
            <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

            <div class="hiddendiv nr1"></div>
            <div class="hiddendiv nr2"></div>
        </div> 
	  
	  

欢迎任何意见。提前致谢。

Answer 1

能否请您验证一下您是否期待这样的事情？

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target,.modalDialog:hover {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>#__spookyPopup {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #fff);
  background: -o-linear-gradient(#fff, #999);
}

.profile_container {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.profile_div {
  height: 120px;
  width: 130px;
  margin-top: 20px;
  margin-left: 130px;
  background: #ddd;
  border: 1px solid grey;
}

.head_div {
  min-height: 12px;
  width: 100%;
}

.media_layer {
  margin-top: 20px;
  min-height: 12px;
  width: 400px;
  display: inline-flex;
}

.media_layer a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  background-color: blue;
  color: #FFF;
}

.manual {
  height: 50px;
  width: 197px;
  float: right;
  background: #;
  display: inline-block;
}

.manual:hover {
  border-bottom: 2px solid #ab0a72;
}

.social {
  height: 50px;
  width: 197px;
  background: #;
  display: inline-block;
}

.social:hover {
  border-bottom: 2px solid #ab0a72;
}

.social_link_container {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.fb_container {
  height: 50px;
  width: 340px;
  margin-top: 20px;
  margin-left: 30px;
  background: #ddd;
  border: 1px solid grey;
}

.clicker.hidden {
  display: none;
}

.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}

.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
  display: none;
}

#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
  display: inline-flex;
}

#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
  height: 150px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
  <div id="__spookyPopup">
    <a href="#close" title="Close" class="close">X</a>
    <div class="media_layer">

      <div class="social">
        <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
      </div>


      <div class="manual">
        <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
      </div>


    </div>

    <div id="showdiv1"></div>
    <div id="showdiv2"></div>

    <div class="media_layer">
		  <a href="#showdiv1" class="clicker social" tabindex="1">SOCIAL</a>
		  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

		  <a href="#showdiv2" class="clicker manual" tabindex="2">MANUAL</a>
		  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

		  <div class="hiddendiv nr1"></div>
		  <div class="hiddendiv nr2"></div>
	 </div>