问题
Here is how my layout looks like. Two columns with an image on the left and 2 rows on the right. I'm using CSS flex to form this layout, and there is a tabbing function inside my code.
I wanna make the these two column having the same height but failed. Hoping that some of you could provide me with some advice. Thanks!
$('#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 1234 5678</p>
<p>F 1234 5678</p>
<p>E <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 1234 5678</p>
<p>F 1234 5678</p>
<p>E <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 1234 5678</p>
<p>F 1234 5678</p>
<p>E <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>回答1:
I got the desired result just by commenting out the .rowdisplay_contact width100 div which you, if you ask me, don't even need. I also added some basic CSS browser reset which is always good to have:
$('#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 1234 5678</p>
<p>F 1234 5678</p>
<p>E <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 1234 5678</p>
<p>F 1234 5678</p>
<p>E <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 1234 5678</p>
<p>F 1234 5678</p>
<p>E <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>来源：https://stackoverflow.com/questions/46829498/display-flex-make-image-same-height-with-another-columns