使不同列中的文本以相同方式转到新行

时间：2018-09-09 12:51:43

标签： html css

enter image description here 我的桌子上有很多包含文本，图像和文本的列。我使用了一些CSS来以相同的方式调整图像的大小。现在，当我调整浏览器的大小时，文本会分成多行。我希望所有文本都在同一时间点同时发生，但是我不知道该怎么做。

完整的HTML和CSS代码，以及JSFiddle上的有效示例：http://jsfiddle.net/zmyfjrdv/14/

HTML代码的相关部分：

  <tr id="geqtablefaderrow" class="geqtablerow">
    <td class="geq">100 Hz <br><img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png"><br>100 Hz</td>
    <td class="geq">200 Hz <br><img class="geqfaderimage" data-frequency="200" src="https://i.imgur.com/ImkN7ng.png"><br>200 Hz</td>
    <td class="geq">400 Hz <br><img class="geqfaderimage" data-frequency="400" src="https://i.imgur.com/ImkN7ng.png"><br>400 Hz</td>
    <td class="geq">800 Hz <br><img class="geqfaderimage" data-frequency="800" src="https://i.imgur.com/ImkN7ng.png"><br>800 Hz</td>
    <td class="geq">1.6 kHz <br><img class="geqfaderimage" data-frequency="1600" src="https://i.imgur.com/ImkN7ng.png"><br>1.6 kHz</td>
    <td class="geq">3.15 kHz <br><img class="geqfaderimage" data-frequency="3150" src="https://i.imgur.com/ImkN7ng.png"><br>3.15 kHz</td>
    <td class="geq">6.3 kHz <br><img class="geqfaderimage" data-frequency="6300" src="https://i.imgur.com/ImkN7ng.png"><br>6.3 kHz</td>
    <td class="geq">12.5 kHz <br><img class="geqfaderimage" data-frequency="12500" src="https://i.imgur.com/ImkN7ng.png"><br>12.5 kHz</td>
  </tr>

CSS代码的相关部分：

table.geqtable
{
    margin: auto;
    margin-top: 30px;
    border: 1px solid black;
    padding: 10px;
    box-shadow: 0px 2px 4px 0px #666666;
    text-align: center;
    width: 97%;
    table-layout: fixed;
}

tr.geqtablerow
{
    border: 1px solid black;
}

td.geqtablecell
{
    margin: 0px;
    border: 0px;
    padding: 1px;
}

.geqfaderimage
{
    max-width: 100%;
    height: auto;
    width: 100%;
    float: none;
}

关于我如何实现预期行为的任何想法？

2 个答案:

答案 0 :(得分：1)

只需在数字和单位（Hz / kHz）之间插入一个<br class="frequency-divider" />标签即可。

<td class="geq">100<br class="frequency-divider" /> Hz ... </td>

然后在不需要时使用媒体查询（根据需要进行调整）将该标签设置为display: none;：

@media screen and (min-width: 800px) {
    .frequency-divider { display: none; }
}

您在这里：

*
{
	font-family: 'Montserrat', sans-serif;
}

body
{
	margin: auto;
	font-size: large;
}

table.geqtable
{
	margin: auto;
	margin-top: 30px;
	border: 1px solid black;
	padding: 10px;
	box-shadow: 0px 2px 4px 0px #666666;
	text-align: center;
	width: 97%;
	table-layout: fixed;
}

tr.geqtablerow
{
	border: 1px solid black;
}

td.geqtablecell
{
	margin: 0px;
	border: 0px;
	padding: 1px;
}

.volume-control
{
	width: 100%;
}

.geqfaderimage
{
	max-width: 100%;
	height: auto;
	width: 100%;
	float: none;
}

button.control-button
{
	font-size: x-large;
}


h1
{
	margin: 0px 0px 10px 0px;
	font-size: xx-large;
	text-decoration: underline;
}


h2
{
	margin: 10px 0px;
	font-size: x-large;
	text-decoration: underline;
}

h3
{
	border: 0px;
	padding: 0px;
	margin: 0px 0px 5px 0px;
	font-size: large;
	text-decoration: underline;
}

h4
{
	margin: 10px 0px;
	font-size: large;
	text-decoration: underline;
}

a
{
	color: #0000BB;
}

a:hover
{
	color: #000000;
}

.align-left
{
	text-align: left;
}

.align-center
{
	text-align: center;
}

.align-right
{
	text-align: right;
}

@media screen and (min-width: 800px) {
    .frequency-divider { display: none; }
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:900" rel="stylesheet">
<table class="geqtable">
    <tbody>
      <tr class="geqtablerow">
        <td class="geqtablecell" colspan="8">
          <h1 class="align-center">Frequency Trainer</h1>
          <hr>
        </td>
      </tr>
  <tr id="geqtablefaderrow" class="geqtablerow">
    <td class="geq">100<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png"><br>100<br class="frequency-divider" /> Hz</td>
    <td class="geq">200<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="200" src="https://i.imgur.com/ImkN7ng.png"><br>200<br class="frequency-divider" /> Hz</td>
    <td class="geq">400<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="400" src="https://i.imgur.com/ImkN7ng.png"><br>400<br class="frequency-divider" /> Hz</td>
    <td class="geq">800<br class="frequency-divider" /> Hz <br><img class="geqfaderimage" data-frequency="800" src="https://i.imgur.com/ImkN7ng.png"><br>800<br class="frequency-divider" /> Hz</td>
    <td class="geq">1.6<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="1600" src="https://i.imgur.com/ImkN7ng.png"><br>1.6<br class="frequency-divider" /> kHz</td>
    <td class="geq">3.15<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="3150" src="https://i.imgur.com/ImkN7ng.png"><br>3.15<br class="frequency-divider" /> kHz</td>
    <td class="geq">6.3<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="6300" src="https://i.imgur.com/ImkN7ng.png"><br>6.3<br class="frequency-divider" /> kHz</td>
    <td class="geq">12.5<br class="frequency-divider" /> kHz <br><img class="geqfaderimage" data-frequency="12500" src="https://i.imgur.com/ImkN7ng.png"><br>12.5<br class="frequency-divider" /> kHz</td>
  </tr>
      <tr>
        <td class="geqtablecell" colspan="8">
          <hr /><br />
          Volume:<br />
          <br />
          <input id="volume-control" type="range" min="0" max="20" value="2" step="0.1" class="volume-control"><br>
          <br>
          <button type="button" id="start-button" class="control-button">Start</button>
          <button type="button" id="stop-button" class="control-button">Stop</button><br>
          <br>
          <button type="button" id="next-button" class="control-button">Next</button>
        </td>
      </tr>
    </tbody>
  </table>

答案 1 :(得分：1)

有多种方法可以实现它。一种方法是在设备变小时摆弄字体大小，但在某个时候改变字体大小以使它们全部环绕。

另一种方法是删除<br>并将所有文本包装在<span>标签中，以便可以通过CSS控制其宽度：

...
    <td class="geq">
      <span>100 Hz</span>
      <img class="geqfaderimage" data-frequency="100" src="https://i.imgur.com/ImkN7ng.png">
      <span>100 Hz</span>
    </td>
...

@media (max-width: 720px) {
 .geq span {
    max-width: 50px;
    display: inline-block;
 }
}

here看到它。

或者，您可以渲染一些<br>烧杯并切换其显示属性。或者，您可以制作三行并垂直对齐元素，这样即使有些断点或有些断点也不会使它们看起来对齐。

相关问题
最新问题