html内容无法适应不同的屏幕尺寸
我正在使用WPBakery Page Builder处理Wordpress页面。我所做的是使用SnappySnippet从另一个现有页面中提取了一些html / css并将其粘贴到“纯html”块内的页面中。 现在发生的是，内容无法适应所有屏幕。只有我的计算机是全屏的。有点乱。 这是html：
<div id="DIV_1">
<div id="DIV_2">
<div id="DIV_3">
<div id="DIV_4">
ALGUNAS
</div>
<div id="DIV_5">
REFLEXIONES
</div>
<div id="DIV_6">
PREVIAS
</div>
</div>
</div>
<div id="DIV_7">
<div id="DIV_10">
¿Si tu coche se avería, por qué acudes al mecánico y no al
dentista ?.
</div>
</div>
<div id="DIV_11">
<div id="DIV_14">
¿Eres consciente de que vas a poner a la venta tu patrimonio y
el de los tuyos ?, ¿ estás dispuesto a jugártela ?.
</div>
</div>
<div id="DIV_15">
<div id="DIV_18">
¿Eres un profesional inmobiliario ?, ¿ cuentas con elementos
necesarios para fijar el precio de tu vivienda ?, ¿ sabes cuánto pedir
por ella ?.
</div>
</div>
<div id="DIV_19">
<div id="DIV_22">
¿Sabes cómo atraer compradores de verdad y evitar curiosos ?, ¿
permitirías la entrada a tu casa a cualquier persona, sin control ?·
</div>
</div>
<div id="DIV_23">
<div id="DIV_26">
¿Dispones de tiempo libre para enseñar tu piso ?, ¿ estás
dispuesto a asumir las molestias e inconvenientes que esto supone ?.
</div>
</div>
<div id="DIV_27">
<div id="DIV_30">
¿Tienes argumentos para defender el precio de tu propiedad?,
¿eres experto negociador inmobiliario?.
</div>
</div>
<div id="DIV_31">
<div id="DIV_34">
¿Conoces todo el tema contractual que conlleva unas Arras o
Contrato Privado y los aspectos legales y administrativos de la venta
?.
</div>
</div>
<div id="DIV_35">
EN DEFINITIVA,
</div>
<div id="DIV_36">
¿CREES QUE MERECE LA PENA ARRIESGARTE EN LA VENTA DE TU VIVIENDA?
</div>
</div>
这是CSS：
#DIV_1 {
max-width:100%;
padding-top: 30px;
color: rgb(51, 51, 51);
display: table;
height: 455px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 227.5px;
transform-origin: 575px 227.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 0px 265px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1*/
#DIV_2 {
color: rgb(51, 51, 51);
float: left;
height: 210px;
text-align: center;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 299px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 149.5px 105px;
transform-origin: 149.5px 105px;
caret-color: rgb(51, 51, 51);
background: rgb(102, 102, 102) none repeat scroll 0% 0% / auto padding-
box border-box;
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 0px 30px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_2*/
#DIV_3 {
bottom: -105px;
color: rgb(51, 51, 51);
height: 190px;
left: 149.5px;
position: relative;
right: -149.5px;
text-align: center;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
top: 105px;
width: 236px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 118px 95px;
transform-origin: 118px 95px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: -95px 0px 0px -118px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_3*/
#DIV_4 {
color: rgb(204, 204, 204);
display: inline-block;
height: 48px;
letter-spacing: 0px;
text-align: center;
text-decoration: none solid rgb(204, 204, 204);
text-rendering: optimizelegibility;
width: 240px;
column-rule-color: rgb(204, 204, 204);
perspective-origin: 118px 24px;
transform-origin: 118px 24px;
caret-color: rgb(204, 204, 204);
border: 0px none rgb(204, 204, 204);
font: normal normal 600 normal 48px / 48px "Open Sans", sans-serif;
margin: 20px 0px 0px;
outline: rgb(204, 204, 204) none 0px;
}/*#DIV_4*/
#DIV_5 {
color: rgb(204, 204, 204);
display: inline-block;
height: 26px;
letter-spacing: 3px;
text-align: center;
text-decoration: none solid rgb(204, 204, 204);
text-rendering: optimizelegibility;
width: 236px;
column-rule-color: rgb(204, 204, 204);
perspective-origin: 118px 13px;
transform-origin: 118px 13px;
caret-color: rgb(204, 204, 204);
border: 0px none rgb(204, 204, 204);
font: normal normal 600 normal 26px / 26px "Open Sans", sans-serif;
margin: 12px 0px 0px;
outline: rgb(204, 204, 204) none 0px;
}/*#DIV_5*/
#DIV_6 {
color: rgb(255, 255, 255);
display: inline-block;
height: 36px;
letter-spacing: 0px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-rendering: optimizelegibility;
width: 236px;
column-rule-color: rgb(255, 255, 255);
perspective-origin: 118px 18px;
transform-origin: 118px 18px;
caret-color: rgb(255, 255, 255);
border: 0px none rgb(255, 255, 255);
font: normal normal 400 normal 36px / 36px "Open Sans", sans-serif;
margin: 20px 0px 0px;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_6*/
#DIV_7 {
color: rgb(51, 51, 51);
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 14px;
transform-origin: 575px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_7*/
#DIV_8, #DIV_12, #DIV_16, #DIV_20, #DIV_24, #DIV_28, #DIV_32 {
color: rgb(51, 51, 51);
float: left;
height: 24px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 24px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 13px 13px;
transform-origin: 13px 13px;
caret-color: rgb(51, 51, 51);
border: 1px solid rgb(51, 51, 51);
border-radius: 50% 50% 50% 50%;
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_8, #DIV_12, #DIV_16, #DIV_20, #DIV_24, #DIV_28, #DIV_32*/
#I_9, #I_13, #I_17, #I_21, #I_25, #I_29, #I_33 {
bottom: 0px;
color: rgb(51, 51, 51);
left: 9px;
position: relative;
right: -9px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
top: 0px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 0px 0px;
transform-origin: 0px 0px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
}/*#I_9, #I_13, #I_17, #I_21, #I_25, #I_29, #I_33*/
#DIV_10 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 500px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 255px 14px;
transform-origin: 255px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_10*/
#DIV_11, #DIV_15, #DIV_19 {
color: rgb(51, 51, 51);
height: 56px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 28px;
transform-origin: 575px 28px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 15px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_11, #DIV_15, #DIV_19*/
#DIV_14, #DIV_18 {
color: rgb(51, 51, 51);
display: table-cell;
height: 56px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 785px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 397.5px 28px;
transform-origin: 397.5px 28px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_14, #DIV_18*/
#DIV_22 {
color: rgb(51, 51, 51);
display: table-cell;
height: 56px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 785px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 397.5px 28px;
transform-origin: 397.5px 28px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_22*/
#DIV_23, #DIV_27, #DIV_31 {
color: rgb(51, 51, 51);
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 14px;
transform-origin: 575px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 16px "Open Sans", sans-serif;
margin: 15px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_23, #DIV_27, #DIV_31*/
#DIV_26 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 934px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 472px 14px;
transform-origin: 472px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_26*/
#DIV_30 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 753px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 381.5px 14px;
transform-origin: 381.5px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_30*/
#DIV_34 {
color: rgb(51, 51, 51);
display: table-cell;
height: 28px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
vertical-align: middle;
width: 972px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 491px 14px;
transform-origin: 491px 14px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 16px / 28px "Open Sans", sans-serif;
outline: rgb(51, 51, 51) none 0px;
padding: 0px 0px 0px 10px;
}/*#DIV_34*/
#DIV_35 {
color: rgb(51, 51, 51);
height: 30px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 15px;
transform-origin: 575px 15px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 30px / 30px "Open Sans", sans-serif;
margin: 20px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_35*/
#DIV_36 {
color: rgb(51, 51, 51);
height: 25px;
text-decoration: none solid rgb(51, 51, 51);
text-rendering: optimizelegibility;
width: 1150px;
column-rule-color: rgb(51, 51, 51);
perspective-origin: 575px 12.5px;
transform-origin: 575px 12.5px;
caret-color: rgb(51, 51, 51);
border: 0px none rgb(51, 51, 51);
font: normal normal 400 normal 25px / 25px "Open Sans", sans-serif;
margin: 10px 0px 0px;
outline: rgb(51, 51, 51) none 0px;
}/*#DIV_36*/
希望你们能帮助我，我已经尝试了很多事情。
这是全屏视图：
在这里，如果我仅将浏览器置于半屏状态：
1 个答案:
答案 0 :(得分：0)
在CSS中将margin: 0px 265px更改为margin: 0px auto。我不确定您是否也需要处理响应部分，但这是确定您应该首先做的事情。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？