1父DIV中的2个DIV

Question

我试图让两个div在一个父div中并排，但没有成功。第一次它工作得很好，我的意思是我把图像从右边放在DIV中，但是在重新设计之后，事情搞得一团糟，我无法弄明白。我是初学者，所以请简单化。

＆＃13;

＆＃13;

div.surf2
{
	position:absolute;
	background: #41c3ac;
	height: 600px;
}

div.surfleft
{
	display: inline-block;
	width: 45%;
	padding-top: 80px;
	padding-left: 20px;
	height: 600px;
}

div.surf2right
{
	display: inline-block;
	height: 600px;
	width: 55%;
}

＆＃13;

<div class="surf2">
    <div class="surfleft">
    	<p class="title1">Interractive games</p>
       	 <ul style="font-size: 1.5em">
        	<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

var names = new XName[] { "a", "b", "c", "d" };

foreach (XElement xItem in xmlDoc.Root.Elements("item"))
{
    var element = xItem.Elements().FirstOrDefault(x => names.Contains(x.Name));
    //Do something with element
}

Answer 2

inline-block总是有空格。您可以使用float: left;或删除空格：

＆＃13;

＆＃13;

div.surf2 {
  position: absolute;
  background: #41c3ac;
  height: 600px;
}
div.surfleft {
  display: inline-block;
  width: 45%;
  padding-top: 80px;
  height: 600px;
}
div.surf2right {
  display: inline-block;
  height: 600px;
  width: 55%;
}

＆＃13;

<div class="surf2">
  <div class="surfleft">
    <p class="title1">Interractive games</p>
    <ul style="font-size: 1.5em">
      <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
      <li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>
    </ul>
  </div><!--
  --><div class="surf2right">
    <img src="console.png">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

是的，请删除padding-left或使用box-sizing: border-box。

＆＃13;

＆＃13;

div.surf2 {
  position: absolute;
  background: #41c3ac;
  height: 600px;
}
div.surfleft {
  display: inline-block;
  width: 45%;
  padding-top: 80px;
  height: 600px;
  padding-left: 20px;
  box-sizing: border-box;
}
div.surf2right {
  display: inline-block;
  height: 600px;
  width: 55%;
}

＆＃13;

<div class="surf2">
  <div class="surfleft">
    <p class="title1">Interractive games</p>
    <ul style="font-size: 1.5em">
      <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
      <li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>
    </ul>
  </div><!--
  --><div class="surf2right">
    <img src="console.png">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

删除padding-left，因为这会立即使div超过100％。将float: left添加到两个div中，并且应该这样做（您也可以删除display: inline-block）。

div.surf2
{
	position:absolute;
	background: #41c3ac;
	height: 600px;
}

div.surfleft
{
	width: 45%;
	padding-top: 80px;
	height: 600px;
}

div.surf2right
{
	height: 600px;
	width: 55%;
}

div.surf2right, div.surfleft {
    float: left;
}

<div class="surf2">
    <div class="surfleft">
    	<p class="title1">Interractive games</p>
       	 <ul style="font-size: 1.5em">
        	<li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

Answer 4

试试这个：

.surf2 {
    width: fit-content;
    position:absolute;
    background: #41c3ac;
    height: 600px;
}


.surf2 div.surfleft {
    float:left;
    display: block;
    width: 45%;
    padding-top: 80px;
    height: 600px;
 }

.surf2 div.surfright {
    float:right;
 }

 <div class="surf2">
    <div class="surfleft">
        <p class="title1">Interractive games</p>
         <ul style="font-size: 1.5em">
            <li>We have different types of games you can play, testing your abilities to recognise objects, multiple choise exercices and also putting you to the test of spotting mistakes.</li>
            <li>Those games are designed to help you learn and practice english combining fun with hard-working.</li>   
          </ul>
    </div>
    <div class="surf2right">
    <img src="console.png">
    </div>
</div>

width：fit-content将使div成为其中两个div的宽度