html - 显示 flex，使图像与另一列高度相同

Question

这是我的布局的样子。两列，左侧为图像，右侧为 2 行。我正在使用 CSS flex 来形成这个布局，并且我的代码中有一个制表符功能。

我想让这两列具有相同的高度但失败了。希望你们中的一些人能给我一些建议。谢谢!

$('#tabs').tabs({
    activate: function (event, ui) {}
});

#Contact, #contact-panel{ height: 92%;}
.fullwidth_contact{
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  height: 92%;
  margin: 0;
  padding:0;
}

.rowdisplay_contact {
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  height: 90%;
  margin: 0;
  padding:0;
}


.repeat-xcontact {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.width70{flex-basis: 70%;}
.width30{flex-basis: 30%;}

.country_box{ 
	font-size: 25px;
	line-height: 1.2em;
	padding: 12% 10%;
	background-color: #5ba4ee;
}

.address_box{
	padding: 12% 10%;
	background-color: #ccc;
}

.map { background-image: url("http://geology.com/world/world-map.gif");}

ul.tabs{
	margin:0;
	padding: 16% 0 0 0;
    list-style-type: none;
}

ul.tabs li{
	padding: 5px 0;
}

ul.tabs li a{
	color: #fff;
	font-weight: bold;
}

ul.tabs li a:hover, .ui-state-active{
	font-weight: bold;
	color: #1d70c4;
	outline:none;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	font-weight: bold;
	color: #1d70c4;
	text-decoration: none;
}

ul.tabs li a:focus {
    outline:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs" class="fullwidth_contact">
  <div class="repeat-xcontact map width70"></div>
  
  <div class="repeat-xcontact width30">
	<div class="rowdisplay_contact width100">
	  <div class="repeat-xcontact country_box">
		<div class="txt8">CONTACT</div><br/>
		<ul class="tabs" data-persist="true">
			<li><a href="#view1">Content 1</a></li>
			<li><a href="#view2">Content 2</a></li>
			<li><a href="#view3">Content 3</a></li>
		</ul>
	  </div>
	  <div class="repeat-xcontact address_box">
		<div id="view1">
			<p class="country_title">Content 1</p>
			<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
			<p>T &nbsp;&nbsp; 1234 5678</p>
			<p>F &nbsp;&nbsp; 1234 5678</p>
			<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
			var name = "info";
			var domain = "test.com";
			document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
			document.write(name + '@' + domain + '</a>');
			// --><!--</script></p>
		</div>
		<div id="view2">
			<p class="country_title">Content 2</p>
			<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
			<p>T &nbsp;&nbsp; 1234 5678</p>
			<p>F &nbsp;&nbsp; 1234 5678</p>
			<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
			var name = "info";
			var domain = "test.com";
			document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
			document.write(name + '@' + domain + '</a>');
			// --><!--</script></p>
		</div>
		<div id="view3">
			<p class="country_title">Content 3</p>
			<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
			<p>T &nbsp;&nbsp; 1234 5678</p>
			<p>F &nbsp;&nbsp; 1234 5678</p>
			<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
			var name = "info";
			var domain = "test.com";
			document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
			document.write(name + '@' + domain + '</a>');
			// --><!--</script></p>
		</div>
	  </div>
	</div>
  </div>
</div>

Answer 1

我只是通过注释掉 .rowdisplay_contact width100 div 得到了想要的结果，如果你问我，你甚至不需要。我还添加了一些基本的 CSS 浏览器重置，这总是好的:

$('#tabs').tabs({
  activate: function (event, ui){}
});

* {margin: 0; padding: 0; box-sizing: border-box}

#Contact, #contact-panel{height: 92%}

.fullwidth_contact {
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: row;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  height: 92%;
  margin: 0;
  padding: 0;
}

.rowdisplay_contact {
  display: flex;
  display: -moz-box;
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: -moz-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  -ms-flex-direction: column;
  height: 90%;
  margin: 0;
  padding: 0;
}

.repeat-xcontact {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.width70 {flex-basis: 70%}
.width30 {flex-basis: 30%}

.country_box { 
	font-size: 25px;
	line-height: 1.2em;
	padding: 12% 10%;
	background-color: #5ba4ee;
}

.address_box {
	padding: 12% 10%;
	background-color: #ccc;
}

.map {background-image: url("http://geology.com/world/world-map.gif")}

ul.tabs {
  margin: 0;
  padding: 16% 0 0 0;
  list-style-type: none;
}

ul.tabs li {
	padding: 5px 0;
}

ul.tabs li a {
	color: #fff;
	font-weight: bold;
}

ul.tabs li a:hover, .ui-state-active {
	font-weight: bold;
	color: #1d70c4;
	outline:none;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	font-weight: bold;
	color: #1d70c4;
	text-decoration: none;
}

ul.tabs li a:focus {
  outline:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="tabs" class="fullwidth_contact">
  <div class="repeat-xcontact map width70"></div>
  
  <div class="repeat-xcontact width30">
	<!-- <div class="rowdisplay_contact width100"> -->
	  <div class="repeat-xcontact country_box">
		<div class="txt8">CONTACT</div><br/>
		<ul class="tabs" data-persist="true">
			<li><a href="#view1">Content 1</a></li>
			<li><a href="#view2">Content 2</a></li>
			<li><a href="#view3">Content 3</a></li>
		</ul>
	  </div>
	  <div class="repeat-xcontact address_box">
		<div id="view1">
			<p class="country_title">Content 1</p>
			<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
			<p>T &nbsp;&nbsp; 1234 5678</p>
			<p>F &nbsp;&nbsp; 1234 5678</p>
			<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
			var name = "info";
			var domain = "test.com";
			document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
			document.write(name + '@' + domain + '</a>');
			// --><!--</script></p>
		</div>
		<div id="view2">
			<p class="country_title">Content 2</p>
			<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
			<p>T &nbsp;&nbsp; 1234 5678</p>
			<p>F &nbsp;&nbsp; 1234 5678</p>
			<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
			var name = "info";
			var domain = "test.com";
			document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
			document.write(name + '@' + domain + '</a>');
			// --><!--</script></p>
		</div>
		<div id="view3">
			<p class="country_title">Content 3</p>
			<p>Cras dignissim lectus sed dui ullamcorper, et suscipit justo vehicula.</p>
			<p>T &nbsp;&nbsp; 1234 5678</p>
			<p>F &nbsp;&nbsp; 1234 5678</p>
			<p>E &nbsp;&nbsp; <script language="JavaScript"><!--
			var name = "info";
			var domain = "test.com";
			document.write('<a href=\"mailto:' + name + '@' + domain + '\">');
			document.write(name + '@' + domain + '</a>');
			// --><!--</script></p>
		</div>
	  </div>
	<!-- </div> -->
  </div>
</div>