0
Вот мой HTML структура, простойПочему высота div делает промежуток между изображением и div?
<div> <img style="width:100%;height:100%"/> </div>
ДИВ показывает в хроме:
и образ, существует разрыв между DIV и изображением
замечен что изображение должно покрывать div,
если я изменяю высоту div более чем 10px, выглядит идеально.
изображение покрывайте Див
Я проверил, если высота DIV меньше, разрыв больше.
Так в чем проблема?
есть пример скопировать часть кода из моего проекта, нужно указать, что изображение в хром Дев инструментов:
\t ._display_style{
\t display:none;
} \t
.sketchup_display_style
{
\t display:block;
}
\t
\t input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
\t
\t
\t \t .cab_list_form #shape div img{
\t \t width:80%;height:80%;
\t }
\t /*
\t .cab_list_form #shape {
\t \t width:150px;height:200px;
\t }*/
\t .cab_list_form #shape div {
\t \t /*
\t \t width:160px;
\t \t height:160px;
\t \t float:left;
\t \t */
\t \t padding:0.2em 0 0.6em;
\t \t text-align:center;
\t \t background-repeat:no-repeat;
\t \t cursor:pointer;
\t }
\t
\t .cab_list_form #shape div span{
\t \t width:100%;
\t \t display:block;
\t \t
\t }
\t .toggle-red{
\t \t border:2px solid red;
\t }
\t
\t .cab_style_img{
\t \t background-color:#fff;
\t \t border:2px solid #ebebeb;
\t \t text-align:center;
\t }
\t .cab_style_img img{
\t \t width:290px;
\t \t height:240px;
\t }
\t .question_img{
\t \t padding-right:1em;
\t \t float:left;
\t }
\t #cab_condition table td label{
\t /*
\t \t background-repeat:no-repeat;
\t \t text-align:center;
\t \t padding:0.1em 0.8em 0.3em;
\t \t cursor:pointer;
\t \t width:50px;
\t \t height:100%;
\t \t line-height:20px;
\t \t margin:auto;
\t \t text-align:center;
\t \t */
\t \t border-radius:20px;
\t \t text-align:center;
\t \t width:55px;
\t \t height:20px;
\t \t line-height:20px;
\t \t margin:auto;
\t \t background-color:#ffffff;
\t \t cursor:pointer;
\t \t padding:0 0.5em;
\t }
\t #cab_condition table td label input{
\t \t display:none;
\t }
\t #cab_condition table td label span{
\t \t margin:0.1em 0.6em;
\t }
\t .howmanypart_td span{
\t \t margin:0.1em 0.7em ;
\t }
\t .down_search div {
\t \t background-repeat:no-repeat;
\t \t cursor:pointer;
\t \t text-align:center;
\t \t height:30px;
\t \t line-height:30px;
\t \t color:#30b2ba;
\t \t /*
\t \t padding:0.5em 0;
\t \t width:50px;
\t \t
\t \t */
\t }
\t .priceDiv select{
\t \t border:1px solid #bdbdbd;
\t \t width:130px;
\t \t height:28px;
\t \t border-radius:20px;
\t \t /*text-align:center;*/
\t \t color:#30b2ba;
\t \t cursor:pointer;
\t }
\t
\t
\t .door-background{
\t \t position: absolute;
\t \t border:2px solid #000;
\t \t border-collapse:collapse;
\t \t text-align:center;
\t \t padding:0;
\t \t margin:0;
\t }
\t .door-background th, .door-background td {
border:2px solid #999; border-width:0 2px 2px 0;padding:0;
\t \t
}
\t
\t
\t
\t
\t .tableizer-table{
\t \t border:1px solid #000;
\t \t border-collapse:collapse;
\t \t width:100%;
\t text-align:center;
\t }
\t .tableizer-table th, .tableizer-table td {
border:1px solid #999; border-width:0 1px 1px 0;padding:2px;
\t \t
}
\t
\t .wardrobe_type_list{
\t \t width:100%;
\t \t height:40px;
\t }
\t
\t .wardrobe_type_list .groups_check{
\t \t float:left;
\t \t margin-right:25px;
\t \t height:25px;
\t \t line-height:25px;
\t \t
\t }
\t
\t .wardrobe_type_list .groups_check img{
\t \t height:100%;
\t }
\t .wardrobe_type_list .groups_check input[type=radio]{
\t
\t \t height:25px;
\t \t line-height:25px;
\t
\t }
\t
\t .display-none{
\t \t display:none;
\t }
\t
\t .search-container{
\t \t float:left;
\t }
\t
\t body {
\t font-size:14px;
\t margin:15px;
}
.pax_layer {
\t position:absolute;
\t background-repeat:no-repeat;
}
.pax_highlight {
\t position:absolute;
\t border:solid 3px #329afb;
\t -webkit-box-sizing:border-box;
\t -moz-box-sizing:border-box;
\t box-sizing:border-box;
\t z-index:3;
}
.pax_highlight_text {
\t color:#329afb;
\t font-weight:bold;
\t font-size:12px;
\t bottom:0px;
\t margin-bottom:-19px;
\t position:absolute;
\t text-align:center;
}
#groups_list {
\t left:10px;
\t position:relative;
}
#white_hide_menu {
\t background-color:white;
\t height:51px;
\t position:absolute;
\t top:517px;
\t width:5px;
\t display:none;
}
.menu_groups {
\t
\t height:140px;
\t overflow:hidden;
\t position:relative;
\t width:100%;
}
.thumbs_layers_div_a {
\t display:none;
}
.items div {
\t float:left;
}
.items {
overflow-x:scroll;
overflow-y:hidden;
width:100%;
height:100%;
}
.thumbs_layers_group {
\t height:100px;
\t
\t
\t }
\t
\t .thumbs_layers_div {
\t background-color:white;
\t cursor:pointer;
\t float:left;
\t margin-left:8px;
\t padding:1px;
\t width:93px;
\t height:93px;
\t text-align:center;
\t display:inline-block;
\t display:inline;
}
.thumbs_layers_div_selected {
\t border-color:#389CFC;
\t border-width:3px;
\t background-color:#389CFC;
}
.thumbs_layers_div img {
\t border-color:#D1D1D1;
\t border-style:solid;
\t border-width:1px;
\t height:91px;
\t
}
.thumbs_layers_add_item{
\t width:100%;
\t text-align:center;
\t height:25px;
\t line-height:25px;
\t overflow:hidden;
}
.thumbs_layers_div_selected img {
\t border-color:#389CFC;
}
.pax {
\t height:180px;
}
#layers_pax_buffer {
\t pointer-events:none;
}
#layers_pax_buffer {
\t display:none;
\t border:1px solid #CCCCCC;
\t width:1048px;
\t height:585px;
\t position:absolute;
\t top:98px;
}
.val {
\t width:1048px;
\t height:150px;
}
#dialog-confirm,#dialog-confirm2 {
\t display:none;
}
.pax_h_dimension {
display:none;
position: absolute;
height: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 0px 1px 0px 1px;
border-style: solid;
border-color: #444444;
line-height: 23px;
margin-top: -12px;
}
.pax_v_dimension {
display:none;
position: absolute;
width: 7px;
text-align: center;
font-size: 11px;
font-style: italic;
border-width: 1px 0px 1px 0px;
border-style: solid;
border-color: #444444;
}
.pax_h_rule {
height: 1px;
background: #444444;
border: none;
margin: 3px 0 0px 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
hr {
margin: 20px 0;
border: 0;
border-top: 1px solid #eee;
border-bottom: 1px solid #fff;
}
.pax_v_rule {
width: 1px;
background: #444444;
border: none;
margin: 0 3px 0 0;
position: absolute;
left: 3px;
}
.pax_v_text {
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
margin-left: 88px;
display: block;
white-space: nowrap;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
font-size: 11px;
font-style: italic;
pointer-events: none;
}
.drawboard {
xborder:2px solid grey;
position: relative;
margin:10px auto;
}
.pax_layer {
position: absolute;
background-repeat: no-repeat;
xborder:1px solid green;
background:#f0f0f0;
overflow:hidden;
}
.pax_highlight {
position: absolute;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
box-sizing: border-box;
z-index: 3;
border-width: 3px;
border-style: solid;
border-color: rgb(50, 154, 251);
}
#main {
min-width:800px;
margin: 0 auto;
height:auto;
}
.attr {
width:90%;
float:left;
}
.name {
width:90%;
text-align:left;
margin:10px;
}
.selectOption {
width: 130px;
float: left;
margin-left: 8px;
text-align: center;
/*cursor: pointer;*/
}
.selectPic {
width: 100px;
height: 100px;
border: 3px solid #eee;
margin: 0 auto;
overflow: hidden;
}
.selectPic img {
width: 100%;
}
.selectRadio {
width: 100%;
font-size: 12px;
}
.choice_collection {
width: 70px;
height:18px;
border:1px solid #bbb;
float: left;
margin: 5px;
padding:5px;
text-align: center;
cursor: pointer;
}
#message{
\t width:140px;
\t height:80px;
\t border:3px solid #ddd;
\t margin:5px;
\t padding:10px;
\t float:left;
\t background:#eee;
}
#message div{
\t margin-bottom:10px;
\t
}
.button{
\t width:150px;
\t height:40px;
\t padding:10px;
\t float:right;
\t xmargin-top:300px;
\t
\t
}
.button button{
\t color: rgb(255, 255, 255);
border: 1px solid rgb(221, 221, 221);
background: rgb(51, 204, 255);
width:80px;
height:30px;
margin:5px;
font-size:14px;
xfloat:right;
}
.pax{
\t border:3px solid #eee;
\t height:auto;
\t margin:20px;
\t
\t overflow:hidden;
\t min-width:800px;
xoverflow-y: hidden;
}
#items_scroll{
\t overflow-x: scroll;
\t padding:5px;
}
.thumbs_layers_div{
\t overflow:hidden;
\t height:120px;
}
.wardrobe_type_list{
\t xpadding-top:10px;
\t xpadding-left:10px;
\t xwidth:90%;
\t margin:10px;
\t margin-bottom:0;
}
#items{
\t
}
.thumbs_layers_div_selected .thumbs_layers_add_item{
\t color:white;
}
.v #items img{
\t width:95px;
\t height:auto;
}
.v .thumbs_layers_div{
\t height:70px;
}<div id="drawboard1" class="drawboard" style="width: 250px; height: 300px;"><div name="%E5%B7%A6" class="pax_layer" style="top: 0px; left: 4px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>%E5%B7%A6</div><div>宽度:968</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="copyRight" class="pax_layer" style="top: 0px; left: 125px; width: 121px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test1&suffix=GTJXG01GMJXG01&width=121"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>copyRight</div><div>宽度:968</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="1" class="pax_layer" style="top: 0px; left: 243.75px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>1</div><div>宽度:50</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="1" class="pax_layer" style="top: 0px; left: 0px; width: 6.25px; height: 300px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="../json/showpickerv2.jsp?prefix=test3&suffix=GTJXG01GMJXG01&width=6.25"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>1</div><div>宽度:50</div><div>高度:2400</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div name="dingxian" class="pax_layer" style="top: -8.125px; left: -6.25px; width: 262.5px; height: 8.125px; background: rgb(240, 240, 240);"><img style="margin:0;padding:0;height:100%;width:100%" src="http://i4.piimg.com/4851/4195cbf23b1d9389.jpg"><div class="debug" style="top: 0px; left: 0px; width: 200px; height: 100px; padding: 10px; position: absolute;"><div>dingxian</div><div>宽度:2100</div><div>高度:65</div><div>price:0</div><div>ratioTop:0</div><div>ratioLeft:0</div><div>ratioWidth:0</div><div>ratioHeight:0</div></div></div><div class="pax_highlight" style="width: 121px; height: 300px; top: 0px; left: 125px; display: none;"></div></div>
Можете ли вы разместить ссылку на скрипку с кодом? –
Опубликовать свою прямую ссылку или код html/css, который может представлять проблему. –
對!要 JSFiddle 的 連結 嗎? https://jsfiddle.net/ –