Question

所以我正在努力使我的网站响应，并且遇到了超过1700px断点的问题。

这是我的html：

select self.id, coalesce(ct.ticket,uct.ticket)
from country self
left join user_country_ticket uct on uct.country_id = self.id
left join country_ticket ct on ct.country_id = self.id

我之前断点的CSS：

<div class="container-1">
<div class="header">
  <h2>OneDrive/ODB</h2><br><a class="one" href="#Anchor">Report a SharePoint bug here</a> 
 </div>
 <div class="table-col-1">
  <div class="border-1">
 <div class="table-head-1"> 
   <h1>Issues with OneDrive/ODB on the web?</h1>
  </div>
<div class="text-container">
 <p class="table-text">Post and vote on feature suggestions & improvements on UserVoice:</p> 
    <br><a href="#" class="button">ODC/ODB web</a>
    </div>
</div>
</div>

我的CSS断点不起作用：

.table-col-1{
padding: 1.5em;
display: inline-block;
width: 20%;   
}

.table-head-1{
padding: 1.5em;
background-color: #515251;
display: inline-block;
border-bottom: 2px solid #000000;
}

.table-text{
font-size: 15px;
line-height: 18px;
padding-bottom: 1.5em;
}

.text-container{
padding-top: 1.5em;
padding-bottom: 3em;   
}

.border-1{
border: 2px solid #000000;
}

如果我尝试添加宽度，请说100％，甚至是@media screen and (min-width: 1700px) and (max-width: 4000px){ .table-head-1{ padding: 1.3em; background-color: #515251; display: inline-block; border-bottom: 2px solid #000000; } }我得到issue。

请帮忙。谢谢！

Answer 1

将box-sizing: border-box添加到该规则 - 这将包括100％宽度的填充，否则将添加，总计达到100％PLUS给定的填充。

Answer 2

在这种情况下，将宽度指定为100％似乎不起作用，因为您的代码还会向div添加额外的填充，这是不需要的。

那么，您可以尝试更改＆＃34; table-col-1 ＆＃34;的样式属性。到padding: 1.5em 0em;和width to 100%。这方面的一个工作示例如下：https://jsfiddle.net/m70y6jnd/

如果这对您没有帮助，请在下面的评论中告诉我。

媒体查询斗争

2 个答案: