Question

我写了一些简单的html文档。我有两个元素：div为FIXED宽度，后面是image。据我所知，图像是内联元素，因此它假设位于div的右侧，因为div具有固定的宽度并且有足够的空间用于图像。相反，图像低于div元素。所以看起来，div元素占用宽度的100％，无论它的大小是多少。为什么会这样？代码：

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <title></title>
            <meta charset="UTF-8" />

        </head>
    <body>
        <div style="width:500px;"><p>Some text</p></div>
        <img src="someImage.jpeg " />
    </body>
    </html>

Answer 1

块元素不允许其旁边没有HTML元素，除非另有命令（例如，通过向其他元素添加浮动声明）。

这就是图像进入下一行的原因。尝试使用相同的跨度，图像将不会转到下一行。简单的原因是span是一个内联元素，并且可以接受它旁边的另一个HTML元素，前提是该元素是一个内联元素。

希望这有帮助！

Answer 2

Div是一个块元素。因此，默认情况下，其他元素不会放在它旁边您可以将以下行添加到CSS中以实现您期望的行为：

img {float: right;}

Answer 3

Div是一个非替换元素，默认情况下是一个块级元素。

width of non-replaced, block level elements in normal flow始终符合这种平等：

'margin-left' + 'border-left-width' + 'padding-left' + 
'width' + 
'padding-right' + 'border-right-width' + 'margin-right' 
= width of containing block

所以当你减少＆＃34;宽度＆＃34;到500px，自动调整一个或多个其他属性（任一或两个边距），以便相等仍然成立。也就是说，总是使用包含块的整个宽度，并且没有可用于内联元素的空间。

Answer 4

这是因为即使您将固定宽度设置为Imports System.Windows.Automation Imports System.Windows.Forms Module AutomateNotepad Sub Main() Dim wNotepad, document As AutomationElement wNotepad = AutomationElement.RootElement.FindFirst(TreeScope.Children, New PropertyCondition(AutomationElement.NameProperty, "Untitled - Notepad")) document = wNotepad.FindFirst(TreeScope.Children, New PropertyCondition(AutomationElement.LocalizedControlTypeProperty, "document")) document.SetFocus() SendKeys.SendWait("+{F10}") context = AutomationElement.RootElement.FindFirst(TreeScope.Children, New PropertyCondition(AutomationElement.NameProperty, "context")) While context Is Nothing Console.WriteLine("Trying to get context again") Threading.Thread.Sleep(100) context = AutomationElement.RootElement.FindFirst(TreeScope.Children, New PropertyCondition(AutomationElement.NameProperty, "context")) End While MsgBox("Found it!") End Sub End Module，它的默认div CSS属性值也始终为display - 占据整个宽度。发生这种情况是因为block标记定义了HTML中的水平分割或部分。

例如：
在下面给出的代码中，没有定义 display 属性，因此默认值为<div>，这就是图像低于div的原因。

block

在此示例中，<html lang="en"> <head> <title></title> <meta charset="UTF-8" /> </head> <body> <div style="width:500px; background: #cccccc;"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <img src="https://www.w3schools.com/css/img_fjords.jpg" /> </body> </html>属性设置为display，因为图片与段落保持在同一行（查看整页中的代码段）。

inline-block

希望这会有所帮助：）

Answer 5

所以，你想知道div选择下一行而不是自动设置内联的原因。

CSS中的一些元素是块级元素，这意味着它们会自动启动一个新行。例如，如果您创建两个单个单词段落元素，它们将不会相互流动但会出现在单独的行中。其他元素是内联元素。这意味着它们与之前的内容“一致”。一个示例是一个锚标记，它可以出现在另一个元素（如段落）中，而不会导致出现任何额外的空格或新行。

欺骗这种布局模型的一种方法是使用浮动，这允许给定元素移动到其线的一侧并使其他内容沿其侧面流动。右浮动元素将一直推到其容器的右侧，内容沿其左侧流动，左浮动元素将一直推到左侧，内容沿右侧流动。 / p>

典型的例子是当你用一个段落折腾图像并希望这两个图像并排而不是堆叠。首先，我们使用一些HTML创建两个元素：

  <img src="http://domain/200/200/" />
  <p>Hello World...</p>

单独，此代码不会产生我们想要的效果。段落元素是一个块级元素，它出现在它自己的行上，因此段落和图像显示在正常的文档流程中。

我们可以通过向右浮动图像来改变这种行为。这个CSS非常基础：

 img {
      float: right;
      margin: 20px;
      }

Box Thing的工作原理

你应该问自己的问题是，“为什么？”为什么不增加段落边距会增加图像和段落之间的空间？原因是我们未能掌握与该段相关的盒子模型。

如果您对布局在基本级别上的工作方式表示怀疑，请尝试应用一两个边框来查看正在发生的情况。如果我们在段落上使用这种技术，结果可能会让您感到惊讶。

   p {
       border: solid 1px black;
     }

如您所见，图像实际上位于段落的框内！这解决了我们的边缘谜语。我们添加到段落的任何边距都应用于图像的右侧，这就是为什么它不会增加图像和段落之间的空间。

如果我们想要更改此行为以便段落不会环绕图像，我们可以将段落浮动到左边并给它指定宽度（不表示宽度，段落宽度为100％并且赢了不适合图像旁边。

   img {
     float: right;
     margin: 20px;
     }

  p {
     float: left;
     width: 220px;
     margin: 20px;
     }

希望你明白了......

那是疯狂的盒子。：）

Answer 6

min-width: 100%;                  
width: max-content;

您可以根据需要使用最小宽度或最大宽度，希望对您有所帮助^ _ ^

具有固定宽度和内联元素的Div

6 个答案: