Question

我在屏幕上有一个全宽的块。在这里，文本只需占用块的60％。

我的问题是，当我上传选项1时，背景会显示，但文字不是60％而是全屏。

如果我上传选项2，则没有背景颜色，但文字为60％。

我做错了什么？

OPTION 1:

.tekst2 {
	margin-top: 25px;
	margin-bottom:25px;
	text-align: center;
	width: 60%;
	margin-left:auto;
	margin-right:auto;
    font-family: 'Montserrat', sans-serif;
    font-size:16px;
    margin-top:25px;
    float:none;
}

.info
{
	margin-top: 100px;
	width: 100%;
	padding:50px;
	padding-bottom:50px;
	background-color: white;
    text-align:center;
}

OPTION 2:

.info
{
	margin-top: 100px;
	width: 100%;
	padding:50px;
	padding-bottom:50px;
	background-color: white;
    text-align:center;
}


.tekst2 {
	margin-top: 25px;
	margin-bottom:25px;
	text-align: center;
	width: 60%;
	margin-left:auto;
	margin-right:auto;
    font-family: 'Montserrat', sans-serif;
    font-size:16px;
    margin-top:25px;
    float:none;
}

<div class="info">

<div class="tekst1">
<h2 id="tekst1">This is some text</h2>
</div>
<div class="tekst2">
<span id="tekst2">Here is a lot of text and it doesnt scale to 60% when in option 1.</span>
</div>

</div>

Answer 1

HTML CODE

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <style>
  .info
  {
    margin-top: 100px;
    width: 100%;
    height:60%;
    padding:50px;
    padding-bottom:50px;
    background-color:white;
      text-align:center;
  }


  .tekst2 {
    margin-top: 25px;
    margin-bottom:25px;
    text-align: center;
    width: 60%;
    margin-left:auto;
    margin-right:auto;
      font-family: 'Montserrat', sans-serif;
      font-size:16px;
      margin-top:25px;
      float:none;
  }

  </style>
</head>
<body>

背景颜色和/或文本宽度不起作用

1 个答案: