从屏幕截图中可以看出,当页面调整大小时(顺便说一下,这是一个响应式网页),里面的表格会溢出!尝试查看是否有其他地方提到width属性。并且还试图找出是否缺少任何其他标签。但是一切似乎都没问题,我已经摆弄了这个简单的布局问题,因为现在超过2个小时!
这是实际网站:<REMOVED URL>
该表位于&#34;功能&#34;部分。
有关它导致问题的位置的任何建议?到目前为止,我一直在通过Google Chrome的开发工具摆弄css。
修改
HTML代码:
<div class="colorblock block priceblock">
<div id="price" class="block-container">
<div class="hexagon hexagon-top">
<div class="outer"></div>
<div class="inner"><img class="hexagonAndroidImg" src="http://online2shop.net/xbmcbox/wp-content/uploads/2014/04/andriod_logo.png"></div>
</div>
<h2 class="title">Features</h2>
<div class="description"></div>
<div class="infoblock">
<!--- Added by ABC on 26Apr2014 -->
Specifications <br>
<strong>M8 Android 4.3/Android 4.4 KitKat TV Box Specifications:</strong>
<table class="tblFeatures" style="
width: 100%;
">
<tbody>
<tr>
<td colspan="2"><strong>Hardware Specifications</strong></td>
</tr>
<tr>
<td>CPU</td>
<td>Amlogic S802 Quad core Cortex A9r4 2GHz</td>
</tr>
<tr>
<td>GPU</td>
<td>Octa-core Mali-450MP GPU @ 600MHz</td>
</tr>
<tr>
<td>FLASH</td>
<td>8 GB NAND FLASH</td>
</tr>
<tr>
<td>SDRAM</td>
<td>2GB DDR3</td>
</tr>
<tr>
<td colspan="2"><strong>Power Supply Specifications</strong></td>
</tr>
<tr>
<td>Power Supply</td>
<td>DC5V/2A</td>
</tr>
<tr>
<td>Power Indicator (LED)</td>
<td>Power ON :blue; Standby :Red</td>
</tr>
<tr>
<td colspan="2"><strong>Main Features</strong></td>
</tr>
<tr>
<td>OS</td>
<td>Android 4.4 KitKat OS</td>
</tr>
<tr>
<td>3D</td>
<td>Hardward 3D graphics acceleration</td>
</tr>
<tr>
<td>Support Decoder format</td>
<td>HD MPEG1/2/4,H.264, HD AVC/VC-1,RM/RMVB,Xvid/DivX3/4/5/6 ,RealVideo8/9/10</td>
</tr>
<tr>
<td>Support Media format</td>
<td>Avi/Rm/Rmvb/Ts/Vob/Mkv/Mov/ISO/wmv/asf/flv/dat/mpg/mpeg</td>
</tr>
<tr>
<td>Support Music format</td>
<td>MP3/WMA/AAC/WAV/OGG/AC3/DDP/TrueHD/DTS/DTS/HD/FLAC/APE</td>
</tr>
<tr>
<td>Support Photo format</td>
<td>HD JPEG/BMP/GIF/PNG/TIFF</td>
</tr>
<tr>
<td>USB host</td>
<td>2High speed USB 2.0,support USB DISK and USB HDD</td>
</tr>
<tr>
<td>Card reader</td>
<td>SD/SDHC/MMC cards</td>
</tr>
<tr>
<td>HDD file system</td>
<td>FAT16/FAT32/NTFS</td>
</tr>
<tr>
<td>Support Subtitle</td>
<td>SRT/SMI/SUB/SSA/IDX+USB</td>
</tr>
<tr>
<td>High Difinition video output</td>
<td>SD/HD max.1920x1080 pixel</td>
</tr>
<tr>
<td>OSD type of languages</td>
<td>English/French/German/Spanish/Italian/ etc multilateral languages</td>
</tr>
<tr>
<td>LAN</td>
<td>Ethernet:10/100M, standard RJ-45</td>
</tr>
<tr>
<td>Wireless</td>
<td>Built in WiFi</td>
</tr>
<tr>
<td>Mouse/ Keyboard</td>
<td>
Support mouse and keyboard via USB;
Support 2.4GHz/5GHZ wireless mouse and keyboard via 2.4GHz USB dongle
</td>
</tr>
<tr>
<td>HDMI</td>
<td>HDMI 1.4 up to 4K2K</td>
</tr>
<tr>
<td>AV</td>
<td>AV</td>
</tr>
<tr>
<td>3G</td>
<td>Support</td>
</tr>
<tr>
<td>DOLBY TrueHD and DTS HD</td>
<td>DOLBY TrueHD and DTS HD Bypass through HDMI</td>
</tr>
<tr>
<td colspan="2"><strong>Software Specifications</strong></td>
</tr>
<tr>
<td>Network Function</td>
<td>Skype chatting,Picasa,Youtube,Flicker,Facebook,Online movies,etc</td>
</tr>
<tr>
<td>Other feature</td>
<td>Free Internet searching,thousands of android applications,many kinds of games,etc.</td>
</tr>
</tbody>
</table>
<br style="color: #222222;">
<strong style="color: #222222;">M8 Android 4.3/Android 4.4 KitKat TV Box Package Contains:</strong><br style="color: #222222;"><br style="color: #222222;">
<ul style="color: #222222;">
<li>HDMI Cable*1</li>
<li>USB Cable*1</li>
<li>Manual*1</li>
<li>AV Cable*1</li>
<li>Adapter*1</li>
</ul>
</div>
</div>
</div>
CSS:
.tblFeatures td{ border-color: #1DB6B6; padding-top: 5px; padding-bottom: 5px;}
.priceblock .block-container .infoblock {
float: none;
width: 100%;
margin-left: 0px;
}
.priceblock .block-container .infoblock {
float: none;
width: 100%;
margin-left: 0px;
}
.block {
float: left;
width: 100%;
position: relative;
padding: 0 0 100px 0;
}
答案 0 :(得分:0)
<td>Amlogic S802 Quad core Cortex A9r
出于某种原因,
被称为非破坏空间。它可以防止线路断裂。如果您希望文本适应表格的宽度,您必须摆脱它们。