Question

我是css的新手，目前我正在尝试将屏幕拆分为两部分，并在左侧和右侧放置文字。但是，由于某种原因，正确的＆＃34;框＆＃34;没有覆盖屏幕的整个右侧部分，只有200-300像素......

的jsfiddle： https://jsfiddle.net/19mw8hzL/

黑色文字应该到达屏幕的右侧。

(^\D*([0-9]{6})\D*([0-9]{9})\D*([0-9]{6,7})\D*([0-9]{2,3})\D*)

Answer 1

更改#two的css，添加20%的{{1}}，以获得100％：

#one

Answer 2

嗨，请修改这些

让我们将父元素设为100％，并将子元素分别设为50％

.wrapper { 
   width : 100%;
}

#one {
  float:left; 
  width:50%;
}

宽度为46％，因为我们已将填充权限设为4％（46 + 4 = 50）

#two { 
  float: right;
  width: 46%; 
  padding-top: 17px;
  padding-right: 4%;
}

：）

Answer 3

Flexbox可以做到这一点。

.w-text-1 {
  font-family: 'Garamond', serif;
  color: rgba(163, 42, 46, 1);
  font-size: 35px;
}
.wrapper {
  display: flex;
}
.wrapper div {
  color: #fff;
}
#one {
  width: 20%;
}
#two {
  flex: 1;
  background: lightblue;
  text-align: right;
}
#two a {
  text-decoration: none;
  font-family: 'Gotham', sans-serif;
  font-size: 17px;
  color: #000;
  border: 1px solid grey;
}
#two ul {
  overflow: hidden;
  padding: 0;
}
#two li {
  display: inline-block;
  margin: 5px 0 0 0;
}

<div class="wrapper">
  <div id="one">
    <p class="w-text-1">Strategy</p>
  </div>
  <div id="two">
    <ul>
      <li><a href="#">Visioning</a>
      </li>
      <li><a href="#">Strategic Analysis</a>
      </li>
      <li><a href="#">Strategy Formulation</a>
      </li>
      <li><a href="#">Business Model Innovation</a>
      </li>
      <li><a href="#">Financial Modeling</a>
      </li>
    </ul>
  </div>
</div>

Answer 4

*{
  box-sizing: border-box;
}

这将删除填充作为所有元素宽度的一部分。不要使用'*'作为选择器，因为它在DOM上非常重。

#two {
  width: 80%;
}

因为20％+ 80％= 100％

#two li {
    display: inline-block;
}

这将为li的

添加宽度和高度

CSS：增加列表项的宽度

4 个答案: