时间戳

首页 > 解决方案 > 使具有绝对宽度的组件具有响应性

html - 使具有绝对宽度的组件具有响应性

问题描述

我有一个在 adobe xd https://pensive-bhaskara-03863d.netlify.app/中设计的组件，并通过 xd 将其导出到 html/css 插件。问题是导出的宽度都是绝对的，而且很多。

html

<div id="content-container" >
            <div id="page_airline_results_ek1"  >
                <div id="_bg__airline_results_ek2"  ></div>
                <div id="rectangle_1"  ></div>
                <img src="https://logan.site/skins/rectangle_2.png" id="rectangle_2" />
                <img src="https://logan.site/skins/rectangle_3.png" id="rectangle_3" />
                <div id="multiple__airlines" >
                    Multiple <br/>Airlines
                </div>
                <div id="ethiopian_airlines" >
                    Ethiopian<br/>Airlines
                </div>
                <div id="operated_by_ukraine_international_airlines" >
                    Operated by Ukraine International Airlines
                </div>
                <div id="_4_25_am" >
                    4:25 am
                </div>
                <div id="nbo" >
                    NBO
                </div>
                <div id="_6_00pm" >
                    6:00pm
                </div>
                <div id="kbp" >
                    KBP
                </div>
                <div id="_11h_07m" >
                    11h 07m
                </div>
                <div id="_21h_23m" >
                    21h 23m
                </div>
                <div id="_4_25_am_ek1" >
                    4:25 am
                </div>
                <div id="nbo_ek1" >
                    NBO
                </div>
                <div id="_6_00pm_ek1" >
                    6:00pm
                </div>
                <div id="kbp_ek1" >
                    KBP
                </div>

                <div id="group_6"  >
                    <img src="https://logan.site/skins/line_1.png" id="line_1" />
                    <img src="https://logan.site/skins/line_2.png" id="line_2" />

                    <div id="group_4"  >
                        <div id="rectangle_4"  ></div>

                    </div>

                </div>
                <img src="https://logan.site/skins/line_3.png" id="line_3" />
                <img src="https://logan.site/skins/icon_awesome_share_alt.png" id="icon_awesome_share_alt" />
                <div id="rectangle_5"  ></div>
                <div id="view_deal" >
                    View Deal
                </div>
                <div id="__1_600" >
                    $1,600
                </div>

                <div id="group_7"  >
                    <img src="https://logan.site/skins/line_1_ek1.png" id="line_1_ek1" />
                    <img src="https://logan.site/skins/line_2_ek1.png" id="line_2_ek1" />

                    <div id="group_4_ek1"  >
                        <div id="rectangle_4_ek1"  ></div>

                    </div>

                </div>

            </div>
</div>

和CSS

/*
    @name airline_results
*/
/* Only edit this if you know what you are doing! */
body { margin: 0px; padding: 0px; font-family:"Arial"; overflow-x:hidden; }

/* Only edit this if you know what you are doing! */
img { position: absolute; display: block; margin: 0px; border: none; padding: 0px; }

/* Only edit this if you know what you are doing! */
div { position: absolute; }

#content-container { display: table; position: relative;  margin-left: auto; margin-right: auto;  }

#content-container > div{ position: relative; top:inherit; }
#page_airline_results_ek1 {
    top: 0px;
    left: 0px;
    width: 729px;
    height: 172px;
}

#_bg__airline_results_ek2 {
    top: 0px;
    left: 0px;
    width: 729px;
    height: 172px;
    background:rgba(255,255,255,255);
}


#rectangle_1 {
    top: 0px;
    left: 0px;
    width: 731px;
    height: 173px;
    -ms-border-radius: 1px;
    -o-border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    border: 1px solid #707070;
    background:rgba(255,255,255,255);
}


#rectangle_2 {
    top: 11px;
    left: 13px;
    width: 64px;
    height: 36px;
}


#rectangle_3 {
    top: 80px;
    left: 13px;
    width: 64px;
    height: 36px;
}


#multiple__airlines {
    top: 47px;
    left: 13px;
    width: 52px;
    height: 37.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#707070;
}


#ethiopian_airlines {
    top: 117px;
    left: 13px;
    width: 54px;
    height: 37.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#707070;
}


#operated_by_ukraine_international_airlines {
    top: 147px;
    left: 13px;
    width: 228px;
    height: 24px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 12px;
    text-align: left;
    color:#707070;
}


#_4_25_am {
    top: 25px;
    left: 117px;
    width: 46px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#0a0707;
}


#nbo {
    top: 40px;
    left: 126px;
    width: 29px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#707070;
}


#_6_00pm {
    top: 25px;
    left: 263px;
    width: 44px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#0a0707;
}


#kbp {
    top: 40px;
    left: 268px;
    width: 26px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#707070;
}


#_11h_07m {
    top: 33px;
    left: 346px;
    width: 50px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#0a0a0a;
}


#_21h_23m {
    top: 77px;
    left: 346px;
    width: 50px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#0e0c0c;
}


#_4_25_am_ek1 {
    top: 70px;
    left: 117px;
    width: 46px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#0a0707;
}


#nbo_ek1 {
    top: 85px;
    left: 126px;
    width: 29px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#707070;
}


#_6_00pm_ek1 {
    top: 70px;
    left: 263px;
    width: 44px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#0a0707;
}


#kbp_ek1 {
    top: 85px;
    left: 268px;
    width: 26px;
    height: 22.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 11px;
    font-weight: bold;
    text-align: left;
    color:#707070;
}

#group_6 {
    top: 80px;
    left: 164px;
    width: 93px;
    height: 9px;
}

#line_1 {
    top: 5px;
    left: 0px;
    width: 40px;
    height: 1px;
}


#line_2 {
    top: 5px;
    left: 53px;
    width: 40px;
    height: 1px;
}

#group_4 {
    top: 0px;
    left: 41px;
    width: 12px;
    height: 9px;
}

#rectangle_4 {
    top: 0px;
    left: 0px;
    width: 14px;
    height: 11px;
    border: 1px solid #707070;
    background:rgba(255,255,255,255);
}


#line_3 {
    top: 0px;
    left: 544px;
    width: 1.9999847412109px;
    height: 171.005859375px;
}


#icon_awesome_share_alt {
    top: 17px;
    left: 557px;
    width: 21.849975585938px;
    height: 27.200012207031px;
}


#rectangle_5 {
    top: 128px;
    left: 557px;
    width: 158px;
    height: 39px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    border: 1px solid #707070;
    background:rgba(52,97,189,255);
}


#view_deal {
    top: 134px;
    left: 596px;
    width: 84px;
    height: 33.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 17px;
    font-weight: bold;
    text-align: left;
    color:#f9f9f9;
}


#__1_600 {
    top: 59px;
    left: 629px;
    width: 84px;
    height: 50.5px;
    overflow: hidden;
    font-family: Segoe UI;
    font-size: 25px;
    font-weight: bold;
    text-align: left;
    color:#090707;
}

#group_7 {
    top: 31px;
    left: 164px;
    width: 93px;
    height: 9px;
}

#line_1_ek1 {
    top: 5px;
    left: 0px;
    width: 40px;
    height: 1px;
}


#line_2_ek1 {
    top: 5px;
    left: 53px;
    width: 40px;
    height: 1px;
}

#group_4_ek1 {
    top: 0px;
    left: 41px;
    width: 12px;
    height: 9px;
}

#rectangle_4_ek1 {
    top: 0px;
    left: 0px;
    width: 14px;
    height: 11px;
    border: 1px solid #707070;
    background:rgba(255,255,255,255);
}



/* Add your custom CSS here */

我正在使用引导程序，所以我希望我的组件占据其所在列的整个宽度。例如，col-md-12我希望组件占据整个宽度。

在 Adob​​e XD 中，组件的尺寸为

width: 729px;
height: 172px;

有没有一种方法可以让这个组件占据任何引导列类的整个宽度？

标签： htmlcsstwitter-bootstrap

解决方案

我发现缩放有效

transform: scale(0.5);

这就是我使用它的方式

 #guid_42a7dc60_7a7f_432e_9a28_e6f5032ee5cf {
  position: absolute;
  width: 2321px;
  height: 443px;
  background-color: #fff;
  transform: scale(0.5) !important;
}

我还发现 XD 的插件非常好用并且可以生成响应式代码。

推荐阅读