我如何根据屏幕两侧的屏幕分辨率自动添加div

Question

我正在尝试使其成为表的名称，除了表名红色破折号之外，我是否想根据屏幕尺寸动态添加此破折号。 在我文字的两边。 对不起，我的英语不好。 给我一个建议怎么做？

 .container{ width:100%; height:30px; background:blue; text-align:center; } .container span{ color:#fff; } .container .dashes{ display:inline-block; width:5px; height:5px; background:red; vertical-align:middle; } 

 <div class="container"> <div class="dashes"></div> <span>Name</span> <div class="dashes"></div> </div> 

Answer 1

只需使用media-query根据您的屏幕尺寸设置.dashes宽度。

 .container{ width:100%; height:30px; background:blue; text-align:center; padding-top: 10px; } .container span{ color:#fff; } .container .dashes{ display:inline-block; width:200px; height:0; background:red; vertical-align:middle; border: 2px dashed blue; } 

 <div class="container"> <div class="dashes"></div> <span>Name</span> <div class="dashes"></div> </div>