显示柔韧性，使图像与其他列的高度相同 [英] Display flex, make image same height with another columns
本文介绍了显示柔韧性，使图像与其他列的高度相同的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这是我的布局外观.两列，左侧为图片，右侧为2行.我正在使用CSS flex形成此布局，并且我的代码中有一个制表功能.
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>
推荐答案
我只是通过注释掉.rowdisplay_contact width100 div 而获得了期望的结果，如果您问我，甚至都不会需要.我还添加了一些基本的 CSS 浏览器重置，总是很高兴:
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>
这篇关于显示柔韧性，使图像与其他列的高度相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
