如何將2個CSS矩形並排放置？默認情況下，它們出現一個低於其他

下面是代碼：如何將2個CSS矩形並排放置？默認情況下，它們出現一個低於其他

<head> 
     <meta http-equiv="refresh" content="01"> 
    <title> 
     Slot Data 
    </title> 
</head>   
<body> 
    <style> 
    div 
    { 
     height: 100px; 
     width: 50px; 
     background-color: green; 
    } 
    </style> 
<div></div> 
    <style> 
    div 
    { 
     height: 100px; 
     width: 50px; 
     background-color: green; 
    } 
    </style> 
<div></div> 

</body>

他們似乎只有一個在另一個之下。

此外，我需要一種方式來改變顏色「綠色」爲「紅色」的條件寫入蟒蛇。爲此，該片段是：

if count1 >= 0.65 * 122*85: 
       print "car0 absent" 
       cv2.rectangle(dst1,(8,8),(340,488),(0,255,0),2) #green 
       cv2.putText(dst1,'slot empty',(12,450), font, 1,(255,255,255),1,cv2.LINE_AA) 
       f = open('test.html','r') 
       filedata = f.read() 
       f.close() 
       newdata = filedata.replace("red","green") 
       f = open('test.html','w') 
       f.write(newdata) 
       f.close() 


      else: 
       print "car0 present" 
       cv2.rectangle(dst1,(8,8),(340,488),(0,0,255),2) #red 
       cv2.putText(dst1,'slot occupied',(12,450), font, 1,(255,255,255),1,cv2.LINE_AA) 
       f = open('test.html','r') 
       filedata = f.read() 
       f.close() 
       newdata = filedata.replace("green","red") 
       f = open('test.html','w') 
       f.write(newdata) 
       f.close()

和我有另一個car1相同的代碼。我如何解決兩個矩形的不同？替換機制將取代我不想要的兩個CSS矩形的顏色。

任何幫助表示讚賞。

來源

2017-03-11 Niranjan Dixit

使用'float：left'使它們並排顯示 –

您可以使用float：left使它們顯示在彼此旁邊。

float:left

只記得清除它，如果你想有一個第二排。只要創建一個小元素與造型

clear:both;

這裏有一個方便的小提琴，這將真正幫助瞭解如何CSS作品：

https://jsfiddle.net/nfnneil/6jgsp9dx/

來源

2017-03-11 06:44:56 Neil

<div>通常顯示爲block level elements但可以通過display: inline-block相鄰顯示。

對於CSS/HTML來說，這看起來很新穎，並且可能會做一些研究或教程以更好地掌握一些事情 - CSS一開始可能很奇怪，但隨着您對它的熟悉程度變得更加容易。

就個人而言，我會使用類來適當地定位元素。至於在Python中按類來獲取元素，我不太確定 - 我不能說我知道我的頭頂如何使用Python來操作這些東西 - 這是在瀏覽器中顯示/執行？

我在一個例子下面創建了一個片段。

.rect { 
 
    height: 100px; 
 
    width: 50px; 
 
    display: inline-block; 
 
    background-color: green; 
 
} 
 
.alert { 
 
    background-color: red; 
 
}

<head> 
 
     <!--<meta http-equiv="refresh" content="01">--> 
 
    <title> 
 
     Slot Data 
 
    </title> 
 
</head>   
 
<body> 
 
    <div class="rect"></div> 
 

 
    <div class="rect alert"></div> 
 

 
</body>

請注意，還有其他方法可以做到this-- CSS提供了各種定位/佈局工具。祝你好運！

來源

2017-03-11 06:48:37

嘿！非常感謝！我比「新」哈哈更新！ –

如何將2個CSS矩形並排放置？默認情況下，它們出現一個低於其他

回答

相關問題