Question

我是HTML和CSS的新手，我遇到了一个无法解决的问题。我创建了一个简单的2列布局，其中两列具有相同的高度，具体取决于列的内容。正如你所看到的，column1工作得非常好，但我对column2有问题。我不知道为什么该文本与column1不在同一级别，当我更改浏览器窗口的宽度（缩小）时，column2中的文本显示在黄色列之外。我会理解，如果第1列的宽度是100％，它会占据它的位置，但事实并非如此。当我将大文本放入第2列时，即使宽度较大，该文本也不会扩展到该黄色列的整个宽度。我需要以某种方式将它正确地放在指定的地方，但我不知道我做错了什么。

body {
	background-color: #eeeeee;
}
header {

	text-align: center;
	height: 80px;
	width: 100%;
	background-color: #eeeeee;
}
#stredovyObal {
	margin-left: 10%;
	margin-right: 10%;
	width: 80%;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
}
#container1 {
    float:left;
    width: 250px;
    background:white;
    position:relative;
}
#col1 {
	text-align: center;
    float:left;
    width: 250px;
    position:relative;

}
#col2 {
text-align: justify;
    float:left;
    width:100%;
    position: relative;
    left: 150%;
}
    
footer {
float: left;
	width: 100%;
	height: 1em;
	background-color: #007501;
		text-align: right;
	color: white;
}    
footer p {
	text-align: right;
	color: white;
	font: bold;
	font: fantasy;
	
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
 <header></header> 
    <div id="stredovyObal">
    <div id="container2"> 
        <div id="container1">
            <div id="col1">Column 1</div>
                          <div id="col2">Column 2</div>

        </div>
    </div>  <footer></footer> 
    </div>



     
  </body>
</html>

有人能帮助我吗？

Answer 1

样式...＃col1宽度为25％，＃col2宽度为75％，它们共同构成＃container1的宽度的100％

<header></header> 
    <div id="stredovyObal">

        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>

        </div>
   <footer></footer> 
    </div>

那你的HTML ......

{{1}}

https://jsfiddle.net/n2qgbr5z/2/

Answer 2

您可以display:inline-flex; #container1 inline-flex。25%的作用是将元素显示为内联级Flex容器。并为75%创建白色列宽和100%创建body的黄色，并确保margin padding和0到body { background-color: #eeeeee; margin:0; padding:0; } header { text-align: center; height: 80px; width: 100%; background-color: #eeeeee; } #stredovyObal { margin-left: 10%; margin-right: 10%; width: 80%; } #container1 { float:left; width: 100%; background:white; position:relative; display:inline-flex; } #col1, #col2 { padding: 15px; box-sizing: border-box; } #col1 { text-align: center; float:left; width: 25%; position:relative; } #col2 { text-align: justify; float:left; width: 75%; position: relative; background:yellow; } footer { float: left; width: 100%; height: 1em; background-color: #007501; text-align: right; color: white; } footer p { text-align: right; color: white; font: bold; font: fantasy; };

这是CSS

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
 <header></header> 
    <div id="stredovyObal">
    <div id="container2"> 
        <div id="container1">
            <div id="col1">Column 1</div>
                          <div id="col2">Column 2</div>

        </div>
    </div>  <footer></footer> 
    </div>



     
  </body>
</html>

if (abs(result-round(result)) < 0.000000001){(int)(result)}

以下是工作示例：http://codepen.io/anon/pen/mPRjBy

浮动布局中的文字

2 个答案: