css - div 内容溢出，内联 block 无用-6ren

css - div 内容溢出，内联 block 无用

转载作者：太空宇宙更新时间：2023-11-04 15:38:02

28

4

我是网页设计的自学者，所以我可能会错过一些基础编码。

所以问题是

内容在一行中从右边溢出了 div。

代码如下

HTML

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">

    <title></title>
</head>

<body>
    <div id="bg">
        <div id="mainwrapper">
            <div id="header">
                <div id="logo"></div>
            </div>

            <div id="contentwrapper">
                <div id="leftwrapper">
                    <div id="contentspacing">
                        <div id="content">
                            <p>
                                asdfasdfasdfasdvvasdvasdvasdvfasdvsdasdas 
                                dfasdfasdfasdvvasdvasdvasdvfasdvsdasdasdfasdfas
                            </p>
                        </div>
                    </div>
                </div>

                <div id="rightwrapper">
                    asdfasdf
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS 如下

/* ---------------------------------------------------------------*/
/* --------------------->  RESET  <<<-------------------------*/
/* ---------------------------------------------------------------*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

body {
line-height:1;
}

body {
font-family:Arial,sans-serif;
font-size:100%;
line-height:1.3em;
_font-size:16px;
color:#504e45;
background:#ebe9e1 url(pics/bg.jpg) top left repeat-x;
}

#bg {
float:left;
display:block;
height:600px;
width:100%;
background:url(pics/hotel-bg.jpg) top center no-repeat;
margin:0 0 0 0;
}

#mainwrapper {
float:left;
display:block;
width:1000px;
margin:0 auto;
}

#header {
float:left;
display:block;
}

#logo {
width:274px;
height:44px;
background:url(pics/logo.png) no-repeat;
margin:50 0 0 100;
}

p {
float:left;
display:inline-block;
line-height:1.7em;
margin:1em 0;
-webkit-margin-before:1em;
-webkit-margin-after:1em;
-webkit-margin-start:0px;
-webkit-margin-end:0px;
}

#contentwrapper {
float:left;
display:block;
width:1000px;
}

#leftwrapper {
float:left;
display:block;
width:593px;
}

#contentspacing {
float:left;
display:block;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}

#content {
float:left;
display:block;
height:auto;
width:593px;
border:1px solid #bdc9f4;
background:url(pics/bg2.png) top left repeat-x;
margin:35 120;
}

#rightwrapper {
float:left;
display:block;
}

最佳答案

添加word-wrap: break-word; word-break: break-all; 到 #content

此处演示 http://jsfiddle.net/ZK6yR/

关于css - div 内容溢出，内联 block 无用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12529727/

28

4

0

文章推荐： asp.net - 带有 IE8 问题的 ASP gridview 中的按钮

文章推荐： javascript - 将 js Controller 的 json 响应显示到 html 表中

blockly - 在 blockly block 中读取用户输入的输入
我的 blockly.js 文件中有以下代码 Blockly.Blocks['account_number'] = { // Other type. init: function() {
Android将图像分成几 block 并获得等效大小的图像 block ( block )
首先抱歉我的英语不好，我正在开发 Image Splitter 应用程序并且已经完成，但是现在的要求是当图像被分割(分成几 block /chunks)那么图像 block 的每一 block (ch
block - smalltalk block - 我可以显式设置返回值并停止执行 block 吗？
#value: 消息的返回值，当发送到一个 block 时，是该 block 中最后一句话的值。所以 [ 1 + 2. 3 + 4. ] value 计算结果为 7。我发现有时很难使用。有没有办法显式
css - 当一个 block 高于其他 block 时，内联 block 对 block 应用顶部效果
我想构建一个包含 3 div 的响应式导航栏相同的 width和 height . 我申请了 inline-block到每个 block ，我得到一个我不理解的行为。问题是，第三 block 由 2
blockly - Blockly 有文件选择器吗？
我希望使用 Blockly 来允许非技术人员用户指定测试脚本。它的一部分需要一个文件选择器，但是，我看不到 Blockly 有一个。是吗？实际上，我找不到完整的标准 block 列表。谁有网址？
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
reactjs - 有没有办法在父 block 中知道您正在编辑该父 block 的内部 block ？
仅当您位于父 block 内部时，父 block 的 props.isSelected 才为 true，但当您在该 block 的 innerBlocks 内进行编辑时则不然。如何从父 block
html - 我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block
我想创建一个具有不同背景颜色 block 和不同悬停颜色 block 的导航栏 block 。我可以分别创建不同的悬停颜色 block 或不同的背景颜色 block ，但不能一起创建。所以请告诉我如何
ios - block 指针变量 'block' 在被 block 捕获时未初始化
我正在使用看到的代码 here定期执行代码: #define DELAY_IN_MS 1000 __block dispatch_time_t next = dispatch_time(DISPATC
ios - 为什么必须复制 block 而不是保留 block ？什么时候不需要复制 block ？
为什么 block 必须被复制而不是保留？两者在引擎盖下有什么区别？在什么情况下不需要复制 block (如果有)？最佳答案通常，当您分配一个类的实例时，它会进入堆并一直存在，直到它被释放。但是，
ios - block block block ，用 __weak self
我想弄清楚我这样做是否正确: 如果我有一个 block ，我会这样做: __weak MyClass *weakSelf = self; [self performBlock:^{
javascript - 当单击部分中的每个 block 时，显示一个 block ，同时使用 jquery 隐藏其他 block 出现第二个 block ，第三个和第四个
我想制作一个 4 block 导航菜单，虽然我已经显示了一个 block ，然后单击打开第二个 block ，从第二个开始选择并再次单击出现第三个 block ，第四个 block 相同...这是我的
java - 最好在 try block 内有一个同步块(synchronized block)，还是在同步块(synchronized block)内有一个 try block ？
例如，这样更好吗？ try { synchronized (bean) { // Write something } } catch (Int
simulation - 尝试检查前方色 block 并根据前方色 block 的色 block 颜色做出决定
我想让一只乌龟检查前方小块的颜色并决定移动到哪里。如果前面的补丁不是白色的，那么乌龟向左或向右旋转并移动。我的 If 决策结构中出现错误，显示“此处应为 TRUE？FALSE，而不是 block 列表
在 block 矩阵的对角部分重复 block 矩阵多次，非对角 block 全部为零矩阵？
我想创建一个 block 对角矩阵，其中对角 block 重复一定次数，非对角 block 都是零矩阵。例如，假设我们从一个矩阵开始: > diag.matrix [,1] [,2] [
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
blockchain - 如何通过区 block 号访问以太坊区 block 链上一个区 block 的数据？
我是区 block 链新手。突然我有一个问题，我们是否可以通过区 block 号来访问以太坊区 block 链上之前的区 block 数据。例如我创建了一个block1、block2。 block
game-engine - 如何在不与其他图 block 重叠的情况下将等距对象从一个图 block 过渡到另一个图 block
我创建了一个等距环境，全部使用 Javascript 和 HTML5 (2D Canvas)，大部分情况下工作正常。我面临的问题是使用不同高度的图 block ，然后对图 block 上的对象索引进行
java - 如果try block 中有 "Where (true)" block ，是否会到达finally block ？
这是令我困惑的代码: public Integer getInteger(BlockingQueue queue) { boolean interrupted = false; try
c# - TPL 数据流转换 block 发布到批处理 block ，然后是操作 block
我有一个基于 TPL 数据流的应用程序，它仅使用批处理 block 和操作 block 就可以正常工作。我已经添加了一个 TransformBlock 以尝试在发布到批处理 block 之前从源中转

首页

博学

6Ren·AI

商城

css - div 内容溢出，内联 block 无用