Question

以前在<HEAD>中

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

正如您在下面附带的screenShots中看到的问题..有UI中断的问题，所以我用以下代码更新了<HEAD>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=0.9; maximum-scale=0.9; minimum-scale=0.9;" />

但仍有问题

网页适用于 1280 X 800 的分辨率，因为您可以查看此图片

这3列（黑色垂直线分开）是<td> 在px内部有一个固定宽度的容器，由于某些限制，我无法将其更改为％。只有主要容器有宽度：100％，（主要容器：，所有页面内容后面的页面总页宽度为白色BG）

我附加了屏幕分辨率问题的屏幕截图

在 1024 X 768

上

如您所见，浏览器的比率 1024 X 768 “移动图像”超越白盒（主容器）

在 1920 X 1080

上

此处浏览器比率为 1920 X 1080 ，主要容器（白色框）为宽度的100％但这三列（<TD>）不是，所有三个宽度都保持不变图像和主要容器是100％

更新：代码链接https://jsfiddle.net/p6x6jsgt/3/

Answer 1

问题不在于您的meta视口广告代码。阅读完所有评论后，您可以找到解决问题的方法：

非最佳解决方案：

保持表格布局，更改为百分比宽度，并使用带有white-space:nowrap;和<br>硬编码换行符的文本块，这些换行符具有不同的字体大小，具体取决于设备屏幕尺寸。

- 关于布局：

.preview-panel rem的宽度固定为.preview-panel { background-size:100% auto; width:100%; }。要解决此问题，请进行以下更改：

td

现在您将注意到其他.template-editor { width:100%; } .template-editor td { width:33%; }的布局问题。这是因为您必须将它们设置为百分比宽度，例如：

.foo {
    white-space:nowrap;
}

- 关于文本块：

你说设置宽度为百分比会弄乱你的文本块。好吧，遗憾的是，没有神奇的解决方案可以解决这个问题（你当前的布局）是将它添加到你放在那里的任何文本块中：

<br>

您还必须使用Lorem ipsum dolor sit amet,<br> consectetur adipiscing elit.<br> Fusce pulvinar aliquet luctus.修复换行符，如下所示：

<span class="line-break"></span>

如果您愿意，可以使用（HTML）：

之类的内容使换行符响应

.line-break {
    display:block;
}

（CSS）：

display:none;

然后，您可以在媒体查询中设置不同的字体大小，还可以使用<br>隐藏有目的的换行符。在我看来，这是一个比普通的flex更好的解决方案。

有了这个，您的布局应该在所有设备中看起来更好。话虽这么说，这仍然是一个糟糕的解决方案，在我看来，完全不同的方法是必要的。

更好的解决方案：

当您的布局基本上不是表格时，使用table或者只是浮动项目，而不是.container { display:flex; align-items:stretch; justify-content:center; } .container__panel { flex-grow:1; height:600px; border:1px solid black; }。你有三个面板，为什么你会强行使用表格布局呢？这是flex的一个例子：

＆＃13;

<div class="container">
  <div class="container__panel"></div>
  <div class="container__panel"></div>
  <div class="container__panel"></div>
</div>

＆＃13;

container__panel

＆＃13;

免责声明：奇怪的cp /usr/local/lib/python3.5/configparser.py /usr/local/lib/python3.5/ConfigParser.py是BEM表示法：http://getbem.com/introduction/

Answer 2

添加

td{
    width: 33%;
}

为了平均分割列，

从下面的类中删除宽度css，以便它可以根据父类调整宽度（我已经注释了我从css中删除的代码）

  #cardListHolder {
        padding-top: 0.4375rem;
        /*width: 21.5625rem;*/
    }

 .edit-card .inner {
        margin: auto;
        padding: 0 2.1875rem;
    /*  width: 18.75rem;*/
    }
.preview-panel {
        background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
        height: 26.25rem;
        margin: auto;
        padding: 3.4375rem 0.8125rem 0;
     /* width: 13.3125rem;*/
    }

尝试用你的CSS替换整个css。我希望这能解决你的问题。

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    ul {
        list-style: outside none none;
        margin: 0;
    }

    .sectional-content {
        background: #f6f6f6;
        color: #222;
        cursor: auto;
        font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
        font-style: normal;
        font-weight: normal;
        line-height: 1.5;
        margin: 0;
        padding: 0;
        position: relative;
    }

    .wrapper {
        min-height: 100%;
        position: relative;
    }

    .centered-container {
        margin-left: auto;
        margin-right: auto;
        width: 96.6667%;
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
        position: relative;
    }

    .tabs-content {
        background: #fff none repeat scroll 0 0;
        border: 1px solid red;
        margin-top: -1px;
        padding: 1.5625rem;
        margin-bottom: 0;
        width: 100%;
    }

    .divider1 {
        height: 18px;
    }

    .template-editor {
        background: #fff none repeat scroll 0 0;
        border: 0 none;
        margin-bottom: 1.25rem;
        table-layout: auto;
    }

    .template-editor tr {
        background: transparent none repeat scroll 0 0 !important;
    }

    td{
        width: 33%;
    }

    .add-remove-template,
    .edit-card {
        padding-top: 5px !important;
        vertical-align: top;
    }

    .add-remove-template {
        border-left: 0 none;
        padding-left: 0 !important;
        padding-right: 0 !important;
        vertical-align: top;
    }

    table tr th,
    table tr td {
        color: #222;
        font-size: 0.875rem;
        padding: 0.5625rem 0.625rem;
        text-align: left;
    }

    #cardListHolder {
        padding-top: 0.4375rem;
    }

    .preview-template,
    .edit-card {
        border-left: 2px solid #808285;
        padding: 0 1.875rem !important;
        vertical-align: top;
    }

    .edit-card .inner {
        margin: auto;
        padding: 0 2.1875rem;
    }

    .preview-panel {
        background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;
        height: 26.25rem;
        margin: auto;
        padding: 3.4375rem 0.8125rem 0;
    }

Answer 3

我认为你想要这样的东西在每个分辨率中都适合自己。

＆＃13;

.section {
  box-sizing: border-box;
  padding: 0 16px;
  width: 33%;
  float: left;
}
.scroll-container {
  height: 360px;
  overflow-y: auto;
  border-right: 1px solid black;
}
.edit-card {
  height: 360px;
  border-right: 1px solid black;
}
.preview-panel img {
  width: 100%;
  max-width: 250px;
}

＆＃13;

<div class="content">
  <div class="section scroll-container" style="height: 360px">
    <ul id="cardListHolder">
      <li></li>
    </ul>
  </div>
  <div class="section edit-card">
    <p>
    edit something
    </p>
  </div>
  <div class="section preview-panel">
    <img src="http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png"/>
  </div>
</div>

＆＃13;

Answer 4

可能在这里过度看...... 您是否尝试过使用媒体查询来解决此问题？看看这个链接是否有用。 https://developers.google.com/web/fundamentals/design-and-ui/responsive/fundamentals/use-media-queries?hl=en

当然，这意味着需要更多编码才能使其流畅地工作，并且需要进行更改。

并且您还在css中使用了text-align: center;属性作为列中的文本段落，而不是＆＃34;将其设置为完美＆＃34;正确地对齐所有三列，然后删除/设置空格。

从我所看到的情况来看，我认为这可以解决你的问题。

Answer 5

删除您在

中指定的已定义宽度

#cardListHolder {
padding-top: 0.4375rem;
width: 21.5625rem;

}

并在

.edit-card .inner {
margin: auto;
padding: 0 2.1875rem;
width: 18.75rem;

}

并使用

th,td{
width: 33%;

}

＆＃13;

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
	*, *::before, *::after {
    box-sizing: border-box;
}
ul {
    list-style: outside none none;
    margin: 0;
}
.sectional-content{
      background: #f6f6f6;
    color: #222;
    cursor: auto;
    font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
    font-style: normal;
    font-weight: normal;
    line-height: 1.5;
    margin: 0;
    padding: 0;
    position: relative;

}
.wrapper {
    min-height: 100%;
    position: relative;
}
.centered-container{
   margin-left: auto;
    margin-right: auto;
width: 96.6667%;
padding-left: 0.3125rem;
    padding-right: 0.3125rem;
    position: relative;
}
.tabs-content {
    background: #fff none repeat scroll 0 0;
    border: 1px solid red;
    margin-top: -1px;
    padding: 1.5625rem;
     margin-bottom: 0;
    width: 100%;
}
.divider1{
  height: 18px;
}
 .template-editor {
    background: #fff none repeat scroll 0 0;
    border: 0 none;
    margin-bottom: 1.25rem;
    table-layout: auto;
}
.template-editor tr {
    background: transparent none repeat scroll 0 0 !important;
    position:relative;
}
.add-remove-template, .edit-card {
    padding-top: 5px !important;
    vertical-align: top;
}
.add-remove-template {
    border-left: 0 none;
    padding-left: 0 !important;
    padding-right: 0 !important;
    vertical-align: top;
}
table tr th, table tr td {
    color: #222;
    font-size: 0.875rem;
    padding: 0.5625rem 0.625rem;
    text-align: left;
}
#cardListHolder {
    padding-top: 0.4375rem;
    
}
.preview-template, .edit-card {
    border-left: 2px solid #808285;
    padding: 0 1.875rem !important;
    vertical-align: top;
}
.edit-card .inner {
    margin: auto;
    padding: 0 2.1875rem;
    
}
.preview-panel {
    background: rgba(0, 0, 0, 0) url("http://cdnsq.ur-nl.com/assets/mobile-898fc89b167945138c3d9f551a5ce551.png") no-repeat scroll center 0;

    height: 26.25rem;
    margin: auto;
    padding: 3.4375rem 0.8125rem 0;
    width: 13.3125rem;
}

th,td{
	width: 33%;
}
</style>
</head>
<body>
<div class="sectional-content"> 
  <div class="wrapper">
      <div class="centered-container">
          <div class="tabs-content">
            <div class="divider1"></div>

            <table class="template-editor" cellpadding="0" cellspacing="0">

              <tbody>
                <tr>
                  <td class="add-remove-template">
                    <div class="scroll-container" style="height: 360px">
                      <ul id="cardListHolder">
                        <li></li>
                      </ul>
                    </div>
                  </td>
                  <td class="edit-card">
                    <div class="inner">
                      
                    </div>
                  </td>
                  <td class="preview-template">
                    <div class="preview-panel">
                     
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>

          </div>
        </div>
      </div>
   </div>
   </body>
   </html>

＆＃13;

浏览器忽略meta name =“viewport”（？）

5 个答案:

非最佳解决方案：

更好的解决方案：